Executing Javascript only if min-width is 800px

Question

For my project I want a parallax scrolling effect only if the screen size is equal or wider than 800px. To do this I wrote following code:

<script>
    if (window.screen.width >= 800) {
        function parallax() {
            var parallax = document.getElementById("box01");
            parallax.style.top = -(window.pageYOffset / 4) + "px";

        }
    }

    window.addEventListener("scroll", parallax, false);

</script>

The parallax scrolling works fine but the "window.screen.width" command is ignored by the browser. Means: The parallax scrolling is also enabled for screen smaller than 800px.

Any help is appreciated!

Jared Smith · Accepted Answer · 2017-12-02 17:53:25Z

2

What you're looking for is window.matchMedia.

function executeIfMinWidth800 (e) {
  if (window.matchMedia('(min-width: 800px)').matches) {
    // do stuff
  }
}

// call initially
executeIfMinWidth800();

// add handler for resize
window.addEventListener('resize', executeIfMinWidth800);

answered Dec 2, 2017 at 17:53

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sveninho Over a year ago

Works now! Thanks heaps!

Patrick Roberts Over a year ago

This is a thing? I love how simple this is.

nicholaswmin · Accepted Answer · 2017-12-02 17:49:33Z

0

window.screen gets you the size of the monitor.

What you want is the size of the viewport, accessible via:

// width
window.innerWidth
// height
window.innerHeight

answered Dec 2, 2017 at 17:49

nicholaswmin

23.2k16 gold badges103 silver badges175 bronze badges

Comments

Harden Rahul · Accepted Answer · 2017-12-03 04:07:06Z

0

You should try this

if (window.matchMedia('(min-width: 800px)').matches) {
  function parallax() {
        var parallax = document.getElementById("box01");
        parallax.style.top = -(window.pageYOffset / 4) + "px";

    }
} else {};
window.addEventListener("scroll", parallax, false);

edited Dec 3, 2017 at 4:07

answered Dec 2, 2017 at 17:53

Harden Rahul

9489 silver badges15 bronze badges

1 Comment

Sveninho Over a year ago

Thanks for the help! This works fine but only on reload.

Collectives™ on Stack Overflow

Executing Javascript only if min-width is 800px

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related