jquery - how to stop a sticky javascript from running on small screen sizes? - Stack Overflow

admin管理员组

文章数量:1406951

Both menubar and sidebar of my site are sticky. But when screen size is less than 700px all div are displayed in one column. I have done this with css media queries. Menubar is displayed on top , mainbar in middle and sidebar at bottom. So when page (which has maximum-width=700px) is scrolled down to 150px then menubar sticks to top and thus mainbar is hidden due to sticky menubar. And when sidebar es it also sticks to top.

This is the javascript:

<script src='.4.2/jquery.min.js'/>
<script src='sticky.js' type='text/javascript'/>
<script>
    $(document).ready(function(){
        $("#menu,#sidebar").sticky({topSpacing:0});
    });
</script>

Please help me in this sticky situation. I want, when screen size is less than 700px then menubar and sidebar will bee non-sticky.

Both menubar and sidebar of my site are sticky. But when screen size is less than 700px all div are displayed in one column. I have done this with css media queries. Menubar is displayed on top , mainbar in middle and sidebar at bottom. So when page (which has maximum-width=700px) is scrolled down to 150px then menubar sticks to top and thus mainbar is hidden due to sticky menubar. And when sidebar es it also sticks to top.

This is the javascript:

<script src='http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='sticky.js' type='text/javascript'/>
<script>
    $(document).ready(function(){
        $("#menu,#sidebar").sticky({topSpacing:0});
    });
</script>

Please help me in this sticky situation. I want, when screen size is less than 700px then menubar and sidebar will bee non-sticky.

• javascript
• jquery

Share Follow edited Aug 11, 2013 at 6:19 icktoofay 129k2323 gold badges259259 silver badges237237 bronze badges asked Aug 11, 2013 at 6:14 robintonrobinton 7555 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Using media queries, you could do something like this:

<script>
    $(document).ready(function() {
        if(window.matchMedia('(min-width: 700px)').matches) {
            $("#menu,#sidebar").sticky({topSpacing:0});
        }
    });
</script>

This is assuming that the only thing that makes them sticky is this JS function.

You could also use $(window).height() > 700 instead of window.matchMedia('(min-width: 700px)').matches.

You could do it with css media queries. Enforce position of #menu and #sidebar be static when the screen width is less than 700px. Because sticky does its job by changing their position to fixed.

<style>
@media (max-width: 699px) {
  #menu,#sidebar{
    position: static !important;
  }
}
</style>
<script src='http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='sticky.js' type='text/javascript'/>
<script>
    $(document).ready(function(){
        $("#menu,#sidebar").sticky({topSpacing:0});
    });
</script>

...when screen size is less than 700px then menubar and sidebar will bee non-sticky...

Let us reverse that. How about: "...when screen size is more than 700px then menubar and sidebar will bee sticky..."?

I suggest checking the screen resolution, and only add sticky when the screen is more than 700px. Specifically:

<script>
    $(document).ready(function(){
        if ($(window).height() > 700) {
            $("#menu,#sidebar").sticky({topSpacing:0});
    });
</script>

Best regards,

Tim.

本文标签： jqueryhow to stop a sticky javascript from running on small screen sizesStack Overflow