问题陈述
实现动态滚动效果时,例如作为与用户滚动同步移动的地图,可能需要限制滚动范围以防止用户
CSS 解决方案
将 animate() 方法与滚动事件一起使用可能会导致冲突和无限动画循环。相反,请考虑使用 CSS 方法来设置 margin-top:
$(window).scroll(function() { var scrollVal = $(this).scrollTop(); if (scrollVal > offset.top) { $sidebar.css({'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'}); } else { $sidebar.css({'margin-top': '0px'}); } });
元素定位的替代方法
在使用 margin-top 定位元素可能无法实现的情况下如果可行的话,可以采用替代方法。考虑一个场景,其中所需的行为是在滚动到达某个点时修复元素:
$(document).ready(function() { $(window).scroll(function() { var headerH = $('.header').outerHeight(true); var scrollVal = $(this).scrollTop(); if (scrollVal > headerH) { $('#subnav').css({'position':'fixed','top' :'0px'}); } else { $('#subnav').css({'position':'static','top':'0px'}); } }); });
以上是如何用CSS限制滚动动画范围?的详细内容。更多信息请关注PHP中文网其他相关文章!