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

概述我有一个< div id ='map'>用户向下滚动时滑动的地图.但是,它似乎让地图永远滚动,永远不会让用户实际到达页面的底部(有一个页脚).我想要做的是获取< div>当它到达另一个动态大小(高度是可变的)< div>的结尾时停止滚动.这两个< div>是并排的并且在同一行中.这是我用来使用用户的滚动进行正确div移动的JavaScript代码：$(fun

我有一个< 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值限制全部内容，希望文章能够帮你解决javascript – 设置窗口滚动动画的CSS值限制所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1120848.html