设置窗口滚动动画的CSS值限制

Question

我有一个<div id ='map'>地图,当用户向下滚动时会滑动.但是,它似乎让地图永远滚动,永远不会让用户实际到达页面的底部(有一个页脚).

我想要做的是让<div>在到达另一个动态大小(高度可变)<div>的结尾时停止滚动.这两个<div>是并排的并且在同一行中.

这是我用来使用用户的滚动进行正确div移动的JavaScript代码:

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

Answer 1

您不能使用animate()具有滚动功能的方法，它会产生冲突，因为滚动值会始终更改，并且 jQuery 无法无限重复相同的动画。停止也无法解决这个问题，或者我无法做到这一点。

\n\n

我建议在陈述中使用变化if。

\n\n

这里没有使用动画的工作动画示例。

\n\n

这是使用 css 方法的相同示例。

\n\n

$(window).scroll(function() {\n    var scrollVal = $(this).scrollTop();\n    if ( scrollVal > offset.top) {\n        $sidebar.css({\n           \'margin-top\': (($window.scrollTop() - offset.top) + topPadding) + \'px\'\n                       //added +\'px\' here to prevent old internet explorer bugs\n        });\n    } else {\n        $sidebar.css({\'margin-top\':\'0px\'});\n    }\n});\n

\n\n

注意：如果你想用 扩展 if 语句else if，不要使用else，它也会产生冲突。说实话，我对这个问题非常有经验。

\n\n

更新：

\n\n

您也可以更改限制计算的方法。我想你想修复导航并且你的 html 是这样的：

\n\n

<div class="wrapper">\n    <div class="header">header</div>\n    <span id="subnav">hold this</span>\n</div>\xe2\x80\x8b\n

\n\n

jQuery 计算应该是这样的：\n这是正在运行的 jsFiddle。

\n\n

$(document).ready(function() {\n   $(window).scroll(function() {\n       var headerH = $(\'.header\').outerHeight(true);\n      //this will calculate header\'s full height, with borders, margins, paddings\n       console.log(headerH);\n       var scrollVal = $(this).scrollTop();\n        if ( scrollVal > headerH ) {\n        //when scroll value reach to your selector\n            $(\'#subnav\').css({\'position\':\'fixed\',\'top\' :\'0px\'});\n        } else {\n            $(\'#subnav\').css({\'position\':\'static\',\'top\':\'0px\'});\n        }\n    });\n });\xe2\x80\x8b\n

\n