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

how to stop a sticky javascript from running on small screen sizes?

本文关键字：屏幕 运行 javascript 何阻止      更新时间：2023-09-26

我的网站的菜单栏和侧边栏都很粘。但当屏幕大小小于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>

在这种棘手的情况下请帮帮我。我想要，当屏幕大小小于700px时然后菜单栏和侧边栏将变得不粘手。

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

<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。

您可以使用css媒体查询来完成此操作。当屏幕宽度小于700px时，强制#菜单和#边栏的位置为静态。因为粘性通过将它们的位置更改为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>

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

让我们扭转这种局面。怎么样："…当屏幕大小超过700px时，菜单栏和侧边栏将变得粘稠…"？

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

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

致问候，

蒂姆。

相关文章：