[英]How to move fixed div 200px up when reaching the end of the page (when scrolling)?
I have a page with two columns(sidebars). 我有一个带有两列(侧栏)的页面。
The left one is fixed (contains google ads) and remains nonchanged even when I scroll down the page. 左边的是固定的(包含google广告),即使我向下滚动页面也不会改变。
The right one contains posts and is positioned relative so scrolling is ok. 右边的包含帖子,并且位置相对,因此可以滚动。
However I have a footer after right column(sidebar). 但是我在右列(边栏)之后有一个页脚。
This footer's width is 100% of the page. 此页脚的宽度为页面的100%。
The problem is that the footer goes to the left sidebar when I scrolled to the bottom. 问题是,当我滚动到底部时,页脚会转到左侧边栏。
I would like to move the left sidebar 200px to the top when I reach 200px from the end of the page when scrolling down. 当我向下滚动时,从页面末尾到达200px时,我想将左侧边栏移至顶部200px。
And return back when srolling back to the top. 滚动回顶部时返回。
<div id="main">
<div id="left">Google Ads here</div>
<div id="right">Content posts here</div>
</div>
<div id="footer">
footer here
</div>
You can use jQuery scroll . 您可以使用jQuery scroll。 most websites use this to load content for their sites.
大多数网站都使用它来加载其网站的内容。
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.