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

IT技术 javascript jquery html css sticky
2021-02-02 18:00:41

我有一个 <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
            });
        }
    });
});
1个回答

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

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

这里不是带有动画用法的动画示例。

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

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

注意：如果你想用 扩展你的 if 语句else if，不要使用else，它也会产生冲突。Bealive me 我真的很喜欢这个问题。

更新：

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

<div class="wrapper">
    <div class="header">header</div>
    <span id="subnav">hold this</span>
</div>​

和 jQuery 计算应该是这样的： Here is working jsFiddle。

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
      //this will calculate header's full height, with borders, margins, paddings
       console.log(headerH);
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > headerH ) {
        //when scroll value reach to your selector
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​
你的计算也有问题，我更新了我的答案。
2021-03-17 18:00:41
现在它什么都不做。我觉得这是因为存在变量问题。想法？
2021-04-01 18:00:41
其它你可能感兴趣的问题
上一篇如何在 puppeter 中打印页面的控制台输出，因为它会出现在浏览器中？ 下一篇javascript 是否使用弹性赛道算法进行处理