0

我设置了这种 css 样式，以#sidebox在屏幕宽度小于 1024 像素时删除侧边栏行为。它也被替换到它的原始位置，在该位置它作为内容中的普通 div，因此：'位置：相对'。

@media screen and (max-width: 1024px) {
    #sidebox {
        position: relative;
        top: 0;
        right: 0;
    }
}

下一步（这是我需要帮助的）是删除 JQuery 脚本，该脚本#sidebox在低于某个高度时会滚动到顶部，但在屏幕大于 1024 像素时仍让它以这种方式运行。

因此，当调整屏幕大小超过 1024 像素时，#sidebox应该滚动到顶部。这种行为被称为“跟随”。

下面是我为完成上述任务而设置的 JQuery 脚本：

if ($(window).width() > 1024) {
    $(window).scroll(function () {
        $("#sidebox").css("top", Math.max(0, 120 - $(this).scrollTop()));
    });
}

$(window).resize(function() {
    if ($(window).width() > 1024) {
        $("#sidebox").css("top", Math.max(0, 120 - $(this).scrollTop()));
    } else {
        $("#sidebox").css("top"), 0;
    }
});

那我怎么帮你问？好吧，正如您可能已经猜到的那样，这种行为是有缺陷的。
#sidebox（在 css 中） <div id="sidebox">...</div>（在 html 中）只有在刷新站点时才会表现得令人满意。

似乎它$(window).resize不能作为调整大小的侦听器。

因此，当我的窗口宽度为 1920px 并且我打开站点时，侧边栏将按需要运行，但是当我将窗口的宽度调整为低于 1024px 时，由于上面看到的 css，它会转到正确的位置，但仍然尝试滚动，因为$(window).resize没有按我希望的那样运行。

4

0 回答 0