媒體查詢結合Javascript？

Question

我有一個側邊欄粘，坐在窗口為用戶向下滾動頁面的頂部。

它在桌面大小下可以正常工作，但是在將屏幕調整為平板電腦大小（@media only屏幕和（最小寬度：768px）和（最大寬度：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() {  },
});