将分区位置从绝对更改为水平滚动固定

Question

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

我的问题是，我有一个250 of宽的div，100%的高度，从屏幕的右边开始的100 of。当我滚动(水平)时，div向左滚动，最终从屏幕上消失。div的位置设置为绝对值。我想要的是，一旦div击中浏览器窗口的左侧，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);
        }
    });
});

根据需要更改滚动正确的数量。如果滚动器右转不起作用，那么试着滚动左()..如果你有什么问题告诉我..。

Answer 2

这里有一篇文章解释了如何垂直地这样做，但同样的概念也应该适用于您的情况。

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

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