小编典典

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

javascript

我有一个

地图,该地图随着用户向下滚动而滑动。但是,它似乎让地图永远滚动,从不让用户实际到达页面底部(有页脚)。

我想做的是让

在到达另一个动态尺寸(高度可变)
的末尾时停止滚动。这两个
并排且在同一行中。

这是我用来使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
            });
        }
    });
});

阅读 335

收藏
2020-05-01

共1个答案

小编典典

您不能将animate()方法与滚动功能一起使用,因为滚动值将始终更改并且jQuery无法无限重复相同的动画,因此会产生冲突。停止也无法挽救这个问题,或者我无法做到这一点。

$(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,这也会造成冲突。相信我,这个问题我真的很熟练。

更新:

您也可以将自己的appuouch更改为限额计算。我假设您要修复导航,并且您的html如下所示:

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






$(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'});
        }
    });
 });​
2020-05-01