Question

所以，我有一个菜单可以在某个点上滚动我的网站。但是，当我的网站宽度为768像素时，我想要停止它。

我试试这种方式

$(window).scroll(function() {
 if ($(window).width() < 760)
     {
        $('#menu').css({'position' : 'absolute'});
     }
 });

那样：

$(function() {
if ( $(window).width() < 760) {     
  $('#menu').css({'position' : 'relative'});
}
});

两次尝试均失败。但是改进其中任何一个都有用吗？

也许这有帮助。这是转动菜单滚动的代码。

$(function() {
$(window).scroll(function()
{
var topo = $('#topo').height(); // altura do topo
var rodape = $('#rodape').height(); // altura do rodape
var scrollTop = $(window).scrollTop(); // qto foi rolado a barra
var tamPagina = $(document).height(); // altura da p?gina

if(scrollTop > topo){
  $('#menu').css({'position' : 'fixed', 'top' : '0'});
}else{
  $('#menu').css({'position' : 'relative', 'margin-top' : 0});
}
});
});

Answer 1

如果你想要一个有点响应的＆＃39;设计，使用media-queries和＆＃39;断点＆＃39; - 你在这里用jquery做了太多工作..

在这种情况下，您将断点标识为＆＃39; 768px-width＆＃39;。
所以不要使用jquery来查找窗口宽度，而是像这样使用css

#menu{
     height:10px;         // first define your menu;
    }

    @media (max-width: 769px) {
      #menu {
        position: fixed;     // header does not move at this width
        // then you can add a media query for that size, notice i used 769px, so this includes 768px and below;
      }
    }

Answer 2

var something = $('.class').offset();
something = something.top;  

$(function() {
  if ( $(window).width() < 760 || $(window).scrollTop() >= something) {     
    $('#menu').css({'position' : 'fixed'});
  }
});

将此问题作为一个示例，说明如何制作粘性导航，这是您要问的。 http://codepen.io/senff/pen/ayGvD

另外，|| =或者如果有条件的话。

在某个宽度下停止滚动菜单

2 个答案: