javascript - 如何阻止粘性 javascript 在小屏幕尺寸上运行？

Question

我网站的菜单栏和侧边栏都是粘性的。但是当屏幕尺寸小于 700px 时，所有 div 都显示在一列中。我已经用 css 媒体查询做到了这一点。顶部显示菜单栏，中间显示主栏，底部显示侧边栏。因此，当页面（最大宽度 = 700 像素）向下滚动到 150 像素时，菜单栏会粘在顶部，因此主栏由于菜单栏粘滞而被隐藏。当侧边栏出现时，它也会停留在顶部。

这是javascript：

<script src='http://ajax.googleapis.com/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>

请在这种棘手的情况下帮助我。我想要，当屏幕尺寸小于 700 像素时，菜单栏和侧边栏将变得不粘。

Answer 1

使用媒体查询，您可以执行以下操作：

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

这是假设唯一让它们变得粘稠的是这个 JS 函数。

您也可以使用$(window).height() > 700代替window.matchMedia('(min-width: 700px)').matches.

Answer 2

您可以使用 css 媒体查询来做到这一点。当屏幕宽度小于 700 像素时，强制 #menu 和 #sidebar 的位置为静态。因为sticky 通过改变他们的位置来完成它的工作fixed。

<style>
@media (max-width: 699px) {
  #menu,#sidebar{
    position: static !important;
  }
}
</style>
<script src='http://ajax.googleapis.com/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>

Answer 3

...当屏幕尺寸小于 700 像素时，菜单栏和侧边栏将变得不粘...

让我们扭转它。怎么样：“...当屏幕尺寸超过 700 像素时，菜单栏和侧边栏会变得粘滞...”？

我建议检查屏幕分辨率，只有在屏幕超过 700px 时才添加粘性。具体来说：

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

此致，

蒂姆。