我有一个<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
});
}
});
});
Run Code Online (Sandbox Code Playgroud) 我正在尝试这样做,当你加载页面时div正在坚持它的底部.然后,当用户向下滚动时,它会粘到顶部.
我可以使用粘性元素粘贴到顶部.
<div id="container">
<div id="menu">
<ul>
<li><a href='#test'>Line 1</a></li>
<li><a href='#'>Line 2</a></li>
<li><a href='#'>Line 3</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()>=660)
{
$('#menu').addClass('fixed');
}else{
$('#menu').removeClass('fixed');
}
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
我不能这样做,所以它在负载时坚持到底.如果不清楚,我附上了一个小模型.
