Question

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

我的问题是，我有一个250px宽的div，高度为100％，从屏幕右侧开始100px。当我滚动（水平）时，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

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

2 个答案: