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

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

这是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>

$（文档）.ready（函数（）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
});

在这种棘手的情况下，请帮助我。我想，当屏幕大小小于700px时

---

然后菜单栏和侧边栏将变为非粘性。

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

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

$（文档）.ready（函数（）{
if（window.matchMedia（‘（最小宽度：700px）’）.matches）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
}
});

这是假设唯一能让它们变得粘乎乎的就是这个JS函数

---

您还可以使用

$（window）.height（）>700

而不是

window.matchMedia（'（最小宽度：700px））。匹配使用媒体查询，您可以执行以下操作：

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


$（文档）.ready（函数（）{
if（window.matchMedia（‘（最小宽度：700px）’）.matches）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
}
});

这是假设唯一能让它们变得粘乎乎的就是这个JS函数

您还可以使用
$（window.height（）>700
而不是
window.matchMedia（'（最小宽度：700px））.matches

…当屏幕大小小于700px时，菜单栏和侧边栏将
变得不粘

让我们扭转这种局面。“当屏幕大小超过700px时，菜单栏和侧边栏会变得粘乎乎的……”怎么样

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

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


$（文档）.ready（函数（）{
如果（$（窗口）.height（）>700）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
});

致以最良好的祝愿

蒂姆

…当屏幕大小小于700px时，菜单栏和侧边栏将
变得不粘

让我们反过来说：“…当屏幕大小超过700px时，菜单栏和侧边栏将变得粘滞…”

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

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


$（文档）.ready（函数（）{
如果（$（窗口）.height（）>700）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
});

致以最良好的祝愿

蒂姆。
你可以通过css媒体查询来实现。
当屏幕宽度小于700px时，强制#菜单和#侧边栏的位置保持静态。
因为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>


@介质（最大宽度：699px）{
#菜单，#侧边栏{
位置：静态！重要；
}
}
$（文档）.ready（函数（）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
});
您可以通过css媒体查询来实现。
当屏幕宽度小于700px时，强制#菜单和#侧边栏的位置保持静态。
因为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>


@介质（最大宽度：699px）{
#菜单，#侧边栏{
位置：静态！重要；
}
}
$（文档）.ready（函数（）{
$（“#菜单，#边栏”）.sticky（{topspace:0}）；
});
这是一个很棒的解决方案！喜欢你如何使用CSS解决问题这是一个很棒的解决方案！喜欢你如何使用CSS解决问题