在一定宽度下停止滚动菜单

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

如果您想要有点 'responsive' 的设计，请使用 media-queries 和 'breakpoints' - 您在这里使用 jquery 做的工作太多了..

在本例中，您将断点标识为“768px-width”。
所以不要使用 jquery 来查找 window 宽度，而是像这样使用 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

另外，|| = 或 if 条件。

在一定宽度下停止滚动菜单

Stop scroll menu under some width

css

jquery

scroll

menu

responsive-design