I have a responsive site where I'm using a javascript to create a sticky sidebar.
I'm also using media queries to change from a multi-column layout to a single-column layout when the browser size is less than 768px.
I need to figure out how to disable the sticky menu script in the single-column layout. Essentially, I need something like a media query for the script statement.
This is the code I'm using to enable the script:
<script>
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
</script>
Is there something I can add to it to only have it trigger if the window is 768px wide or wider?
EDIT: I'm looking for a solution that will work if the user resizes the window on the fly.
Try this.
$(function(){
$(window).resize(function(){
if($(this).width() >= 768){
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
})
.resize();//trigger resize on page load
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With