响应式粘滞边栏

我对我的网站有一个响应式边栏。当屏幕的顶部到达元素减去10px时，它应该开始从'静态'到'固定'。在我的笔记本电脑屏幕上，它适合我，但是当我调整窗口大小以适应像分辨率这样的更多平板电脑时，它并不会从应该开始的位置开始。您可以查看结果here。响应式粘滞边栏

代码中，我有如下：

var obj = $('#menu'); 
var offset = obj.offset(); 
var topOffset = offset.top; 
var leftOffset = offset.left; 
var marginTop = obj.css("marginTop"); 
var marginLeft = obj.css("marginLeft"); 

$(window).scroll(function() { 





    var scrollTop = $(window).scrollTop(); 
    var px = $("#menu").height(); 


if (scrollTop >= (topOffset + px)){ 
    obj.css({ 
      marginTop: 0, 
      top: 20, 
      position: 'fixed', 
     }); 
    } else 
if (scrollTop < topOffset + px){  obj.css({   marginTop: marginTop,   marginLeft: marginLeft,    position: 'static',   });  } 
});

来源

2013-08-03 user2583429

好吧，你有没有尝试刷新它，当你在较小的窗口？ javascript/jquery初始化页面加载，当它认为它在更大的屏幕上，当你调整屏幕大小时，JavaScript不知道它 – user1

为什么不使用媒体查询？另外，我建议不要在.css（）列表中留下尾随的'，'。

@media (max-width: 700px) and (min-width: 300px) { 
    #YOUR_ELE_ID { 
    marginTop: 0; 
    top: 20; 
    position: 'fixed'; 
    } 
}

来源

2013-08-03 16:34:50 carter

问题是，当我调整（和重新加载）时，#menu div不开始正在修复，直到我的一半菜单，这不是我的更高分辨率屏幕上的问题 – user2583429

这就是为什么你添加多个媒体查询，以及多种条件。我只是举了一个例子。 – carter

哦，我明白了，会尝试... – user2583429

响应式粘滞边栏

回答

相关问题