Question

我的侧边栏包含的内容大于屏幕。当用户向下滚动时，我希望直到最后一点才能看到该内容。然后我希望它被修复，以便尽可能多的内容保留在屏幕上。当您在SO中发布问题时，我实际上希望它的工作方式与“类似问题”侧边栏完全相同。在每个示例链接中向下滚动。在破碎的情况下，请注意一切都是如何变得一团糟。

应该像这样工作= http://jsfiddle.net/mrtsherman/G4Uqm/2/

但在这种情况下被打破= http://jsfiddle.net/mrtsherman/G4Uqm/1/

在破损的情况下，当您到达页面末尾时，看起来滚动事件正在被重新触发。然后，这会导致后续滚动事件触发，然后将所有事情搞砸。我该如何正确处理这个案子？我只是想不出来。

$(document).ready(function() {

var dynamic = false;
var topOfSidebar = $("#sidebar").offset().top;
var leftOfSidebar = $("#sidebar").offset().left;
var botOfSidebar = topOfSidebar + $("#sidebar").height();
var botOfScreen = $(window).height() + $(window).scrollTop();

//if sidebar fits on screen then use fixed version of it
if (botOfSidebar < $(window).height()) {
    $("#sidebar").addClass("fixed");
    $("#sidebar").css("top", topOfSidebar);
    $("#sidebar").css("left", leftOfSidebar);
}
else {
    dynamic = true;
}
//toggle sidebar class when user scrolls
$(window).scroll(function() {
    console.log($("#sidebar").css("position"));
    botOfScreen = $(window).height() + $(window).scrollTop();
    //return;
    if (botOfSidebar < botOfScreen && dynamic) {
        $("#sidebar").addClass("fixed");
        //$("#sidebar").css("bottom", 0);
        //$("#sidebar").css("left", leftOfSidebar);
    }
    else if (dynamic) {
        $("#sidebar").removeClass("fixed");
    }
});
});

Answer 1

所以我自己想出了这个。诀窍是将内容包装在具有min-height属性的div中。如果我们将侧边栏切换为固定，则div保持侧边栏的位置。因此不再调整屏幕大小。

.wrap创建div
.parent获取侧边栏的父级（新div）
添加css属性，其中min-height是侧边栏的高度。删除填充和边距

$（ “＃栏”）。包裹（''） .parent（） .css（“min-height”，this.height（）） .css（“padding”，“0px”） .css（“margin”，“0px”）;

动态地将相对定位的内容更改为固定内容 - 错误

1 个答案: