如何在页面bottum构建简单的粘性导航? [英] How to build simple sticky navigation at the page bottum?
本文介绍了如何在页面bottum构建简单的粘性导航?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图使它,所以当你加载一个页面的div是贴在它的底部。
I'm trying to make it so when you load a page a div is sticking to the bottom of it. Then when a user scrolls down it sticks to the top.
我可以使用粘性元素来粘贴到顶部。
I can do the stick to the top part using a sticky element.
<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>
我不能这样做,所以它坚持到底部的负载。
I just can't do it so it sticks to the bottom on load. I've attached a little mockup if it's unclear.
推荐答案
UPDATED。
这里是工作jsFiddle检查。
UPDATED.
Here is working jsFiddle to examine.
jQuery: p>
jQuery:
$(document).ready(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#menu').outerHeight(true);
//outherHeight(true) will calculate with borders, paddings and margins.
$('#menu').css({'top': stickToBot + 'px'});
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot ) {
$('#menu').css({'position':'fixed','top' :'0px'});
} else {
$('#menu').css({'position':'absolute','top': stickToBot +'px'});
}
});
});
注意:如果你想进一步,请检查此答案:
Note: if you want to go further, i suggest to inspect this answer too:
这篇关于如何在页面bottum构建简单的粘性导航?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文