Question

我的网站有响应的侧边栏。当屏幕顶部达到减去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',         });     } 
});

Answer 1

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

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

响应性粘边栏

1 个答案: