我想要一个小格子粘贴到浏览器的右下角。这我做到这一点:将div粘贴到右下角,但始终在页脚之上
#div {
position: fixed;
bottom: 10px;
right: 10px;
}
但我有一个页脚,说高度:200px ;.我想要的是,当您向下滚动页面时,div停留在右下角,但当页面底部弹出页脚时,我希望页脚向上推,以便它不会出现在页面的前面页脚。
我希望我自己清楚......
我想要一个小格子粘贴到浏览器的右下角。这我做到这一点:将div粘贴到右下角,但始终在页脚之上
#div {
position: fixed;
bottom: 10px;
right: 10px;
}
但我有一个页脚,说高度:200px ;.我想要的是,当您向下滚动页面时,div停留在右下角,但当页面底部弹出页脚时,我希望页脚向上推,以便它不会出现在页面的前面页脚。
我希望我自己清楚......
我花了一段时间,但我想我得到了你的答案:)
你应该加入这一行添加了jQuery的HTML,在您添加CSS文件的线下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
,然后创建一个文件scrollBottom.js(JavaScript文件),并添加过这样的:
<script src="scrollBottom.js" type="text/javascript"></script>
在您添加以下代码文件(编辑:的document.ready应补充):
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height()-200) {
$('#div').css('bottom', $(window).scrollTop()-2360);
}
else
{
$('#div').css('bottom', '10px');
}
});
});
爱,这可以没有现在jscripting来完成。 :) CSS的短短几行和一些包装调整: http://jsfiddle.net/bitofgrace/QGEUv/
<div id="wrapper">
<div id="flyover">hi</div> <!-- the content you want to stick in the corner -->
<div class="content"> Body of page content</div>
<div ID="footer"> FOOTER CONTENT</div>
</div> <!-- close wrapper -->
的CSS
#wrapper {width:100%; height:100%; margin:0}
#flyover {background-color:pink; color:white; position:fixed; top: 87.5%; z-index:4;}
#footer {background:green; position:relative; height:100px; width:100%; bottom:0; z-index:1;}
你的JSFiddle不适合我。使用chrome –
你需要为这个JavaScript。 – j08691
它已经被StackOverflow多次询问过了。我记得回答一次... –
看看这个http://css-tricks.com/snippets/jquery/jquery-sticky-footer/ – Afshin