Question

我网站的菜单栏和侧边栏都很粘。但是当屏幕尺寸小于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时然后菜单栏和侧边栏将变得不粘。

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媒体查询来完成此操作。当屏幕宽度小于700px时，强制#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

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

让我们扭转这一点。怎么样：＆＃34; ...当屏幕尺寸大于700px时，菜鸟和侧边栏会变得粘稠......＆＃34;？

我建议检查屏幕分辨率，只在屏幕超过700px时添加粘性。具体做法是：

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

致以最诚挚的问候，

添

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

3 个答案: