使用水平滚动将 Div 位置从绝对更改为固定

Question

我有一个使用水平滚动插件水平滚动的网站https://github.com/brandonaaron/jquery-mousewheel。那里没有问题。

我的问题是，我有一个 250 像素宽的 div，高度为 100%，从屏幕右侧开始 100 像素。当我滚动（水平）时，div 向左滚动并最终从屏幕上消失。 div 的 Position 设置为 Absolute。我想要的是，一旦 div 到达浏览器窗口的左侧，div 就会固定在屏幕的左侧。

我猜我需要使用 JS 来更改 div 的 CSS，一旦它到达屏幕上的特定位置（最左侧）。我见过不少网站通过垂直滚动来实现这一点，菜单栏一旦到达顶部就会固定在屏幕顶部。菜单可能从页面的一半开始并在滚动时向上移动。我只是想在水平面上达到同样的效果。

一般来说，我对代码比较陌生，对 Javascript 也是全新的。我可能咬得比我能咀嚼的多，但我喜欢挑战。感谢任何人的帮助。

我要更改的 CSS 代码是

#header {
    width: 250px;
    background: rgba(22,22,22,.85);
    height: 100%;
    position: absolute;
    margin-left: calc(100% - 350px);
    z-index: 999;
}

然后改成

#header {
    width: 250px;
    background: rgba(22,22,22,.85);
    height: 100%;
    position: fixed;
    margin-left: 0px;
    z-index: 999;
}

Answer 1

根据我从您的问题中了解到的内容，这是我尝试过的。是的，我有用户 javascript..

HTML：

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

CSS：

#headerSlideContainer {
    position: absolute;

    top:0px;
    width: 100%;

   height:1000px;
    background: black;
}
#headerSlideContent {
    width: 250px;
    background-color:red;
    height: 100%;
    position: fixed;
    margin-left: 0px;
    z-index: 999;
}

#new{
    top:60px;
    z-index:2;
    height:100px;
    background:Orange;
    position:absolute;
    color: white;

}

和js：

$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollright() > 100) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});

根据需要更改 scrollright 数量。如果 scrollright 不起作用，请尝试 scrollleft()。如果您有任何问题，请告诉我。

Answer 2

这是一篇解释如何垂直执行此操作的帖子，但同样的概念也应适用于您的情况。

教程：http://jqueryfordesigners.com/fixed-floating-elements/

演示：http://jqueryfordesigners.com/demo/fixedfloat.html