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

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

最佳答案

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

而且我在suggest to use variation中如果声明.

Here is not working animate sample with animate usage.

Here is same example working with css method.

$(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'});
    }
});

注意：如果您想使用else扩展if语句,请不要使用else,否则也会产生冲突.打败我,我对此问题非常满意.

更新：

您也可以将approuch更改为限制的计算.我认为你想要修复导航,你的HTML是这样的：


和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'});
        }
    });
 });

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

猜你在找的HTML相关文章