javascript - 媒体查询与 Javascript 相结合？

Question

当用户向下滚动页面时，我有一个位于窗口顶部的粘性侧边栏。

它在桌面尺寸下工作正常，但是当将屏幕尺寸调整为平板电脑尺寸（@media only screen and (min-width: 768px) and (max-width: 959px) ）时，它不再粘住......

我是否必须将媒体查询添加到我的 Javascript 中？

您可以在http://v3.edharrisondesign.com/project/上查看该项目

    $('#sticky').scrollToFixed({
        marginTop: 20,
        limit: function() {
            var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100;
            return limit;
        },
        minWidth: 1000,
        zIndex: 999,
        fixed: function() {  },
    });

    $('#sticky').bind('unfixed', function() {
        console.log('sticky preUnfixed');
    });
    $('#sticky').bind('unfixed', function() {
        console.log('sticky unfixed');
        $(this).css('color', '');
    });
    $('#sticky').bind('fixed', function() {
        console.log('sticky fixed');
        $(this).css('opacity', '1');
    });
});

Answer 1

您已在#sticky 上将 minWidth 属性设置为 1000。这意味着窗口宽度必须至少为 1000px 宽；否则，它将自行关闭。删除它，或者让它足够小以适合所需的尺寸，它应该可以工作。

换句话说，使它成为：

$('#sticky').scrollToFixed({
    marginTop: 20,
    limit: function() {
        var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100;
        return limit;
    },
    minWidth: 768,
    zIndex: 999,
    fixed: function() {  },
});