响应式粘性侧边栏

Question

我的网站有一个响应式侧边栏。当屏幕顶部到达元素负 10 像素时，它应该开始它的 css 从“静态”更改为“固定”。它在我的笔记本电脑屏幕上对我来说没问题，但是当我将窗口大小调整为更像平板电脑的分辨率时，它并没有从它应该开始的地方开始。你可以查看结果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';
  }
}