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() {  },
});

媒体查询结合Javascript？

1 个答案: