Question

我有这个侧边栏，通过JS设置位置。基本上，它必须在页面滚动时保持原位，然而，当它到达容器的末端时它会熄灭。我如何保留（固定）div以使它不会从容器中移出？我会在这里发布代码和图片来更好地解释我在说什么。

示例：http://www.cosmosgraphicdesign.com/portfolio/work.html?featured

标记：

<div class="container">
    <div id="sidebar">
        <!-- Sidebar Content -->
    </div>

    <div id="mainContent">
        <!-- Main Content -->
    </div>
</div>

CSS：

#sidebar{
    position: absolute;
    width: 350px;
    padding-left: 10px;
}

JQuery的：

var mainContent;
var navbarHeight = $(".navbar").height();
var sidebarHeight = $("#sidebar").height()/2;

$(document).on( "scroll", function(){
    mainContent = $(".work").scrollTop() + navbarHeight;

    $("#sidebar").css("top", mainContent);

    if(mainContent => $(".work").height()){
        mainContent = $(".work").scrollTop() + navbarHeight - sidebarHeight;
        $("#sidebar").css("top", mainContent);
    }
});

Answer 1

这就是我试图解释的内容：Image going off container

Answer 2

如果我正确理解了问题，这是我做的原始示例：

x' = 9x -21y - 10z
y' = 22x -35 - 22z
z'= -22x +34y +21z

Example

固定位置Sidebar通过JS

2 个答案: