Include script only if media-screen > 960px

[lck-git]

Hello devinargenta,

thanks for sharing your script.
How can i change the script, so it was only active/included if media-screen is > 960px or media-height > 600px?

[devinargenta]

Hey @lck-git -- While this functionality isn't currently built into the script, you could use the classes supplied ( set autoMove to false) and use CSS for the animations, scoped to your media queries.

If you want to edit the source code, you can probably wrap https://github.com/devinargenta/stick-em-up/blob/master/stick-em-up.js#L58 this function in an if statement like

if ( $(window).width() > 960 && $(window).height() > 600) {   
     this.requestAnimationFrame(
          _.scrollEvent.bind(_, top)
        );
}

[lck-git]

Hey devinargenta,
thanks for the quick help, it works!
I have implemented it via css, because the change in the script itself requires a reload of the page when one turns, for example, of the portrait view to the landscape view.

My css-code:

@media only screen and (min-height: 768px) {
body header {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 600ms ease-in-out;
transition: -webkit-transform 600ms ease-in-out;
transition: transform 600ms ease-in-out;
transition: transform 600ms ease-in-out, -webkit-transform 600ms ease-in-out;
width: 100%;
}
body.stickEm-in header {
position: relative;
top: 0px;
}
body.stickEm-fixed header {
position: fixed;
top: 0px;
}
body.stickEm-fixed.stickEm-out header {
position: fixed;
top: 0px;
-webkit-transform: translateY(-256px);
transform: translateY(-256px);
}
body.stickEm-fixed.stickEm-in header {
position: fixed;
top: 0px;
}
}

[devinargenta]

glad you worked it out!