3

当用户滚动经过一个 div 时，我需要将它的 css 更改为 position:fixed。就像这里所做的一样：http: //imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/但只有普通的jquery，没有插件。
一旦用户滚动到另一个 div，该 div 也必须停止滚动。
例如：

<div id="stuff"></div>
<div id="this"></div>//must start scrolling with user when user reaches it.
<div id="footer"></div>// when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap

我假设我会使用 .scroll()and .css()，但我不知道从那里去哪里。

4

3 回答 3

8

我注意到，#this一旦你开始，你的答案就会突然消失#footer。我已经调整了您的答案，以允许#this坚持#footer和滚动更顺畅。

我的演示使用了稍微不同的标记并且更加冗长，所以跳到 jsFiddle 并检查一下。

演示： jsfiddle.net/Marcel/e9hyw/

于 2013-04-21T11:37:46.570 回答
3

这最终对我有用：

    jQuery(document).ready(function() {
    var topOfrel = jQuery("#this").offset().top;
    var topOffooter = jQuery("#footer").offset().top - jQuery(window).height(); 
    var topOffootero = topOffooter ;
    var boxheight = jQuery(window).height() - 130;//adjusting for position below
    jQuery(window).scroll(function() {
        var topOfWindow = jQuery(window).scrollTop();
        if (topOfrel < topOfWindow && topOffooter > topOfWindow) {
            jQuery("#this").css("position", "fixed").css("top", "130px").css("overflow","auto").css("height", boxheight + "px");

        } else {
            jQuery("#this").css("position", "static");
        }
    });
});
于 2013-04-21T09:10:19.853 回答
0

您引用的页面使用 jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">

并且还包含其他我们看不到的 Javascript

顺便说一句，您可以在这里查看：

http://imakewebthings.com/jquery-waypoints/waypoints.js
http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js

他使用的功能可以在那里看到，但我不会说这是一个快速的答案。根据他的脚本，他在页面加载后将侦听器附加到元素：

<script type="text/javascript">
    $(document).ready(function() {
        $('.my-sticky-element').waypoint('sticky');
    });
</script>

如果你有具体的问题可以问，但我怀疑很多人会为你解释整个脚本。

于 2013-04-21T08:06:52.877 回答