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

Question

所以，我有一个菜单，当我的网站在某些时候滚动。 但我也想停止它，当我的网站有768px宽度。

我尝试这样

$(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

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

而且，|| =或者如果有条件的话。

Answer 2

如果你想有一个有点“敏感”的设计，使用media-queries和“断点” - 你正在做的工作太多了使用jQuery在这里..

• 在这种情况下，你发现你的断点'768px-width'。

• 因此，而不是使用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; 
     } 
    }