如何在页面底部构建简单的粘性导航? [英] How to build simple sticky navigation at the page bottum?

问题描述

我正在努力使当您加载页面时，div 会粘在页面底部.然后当用户向下滚动时，它会粘在顶部.

我可以使用粘性元素粘贴到顶部.

<div id="菜单"><ul><li><a href='#test'>第 1 行</a></li><li><a href='#'>第 2 行</a></li><li><a href='#'>第 3 行</a></li>

<script type="text/javascript">$(document).ready(function(){$(窗口).滚动(功能(){if($(this).scrollTop()>=660){$('#menu').addClass('fixed');}别的{$('#menu').removeClass('fixed');}});});

我就是做不到，所以它在加载时粘在底部.如果不清楚，我附上了一个小模型.

解决方案

更新.
这里正在使用 jsFiddle 进行检查.

jQuery:

$(document).ready(function() {var windowH = $(window).height();var stickToBot = windowH - $('#menu').outerHeight(true);//outherHeight(true) 将计算边框、填充和边距.$('#menu').css({'top':stickToBot + 'px'});$(窗口).滚动(功能(){var scrollVal = $(this).scrollTop();如果(scrollVal >stickToBot){$('#menu').css({'position':'fixed','top':'0px'});} 别的 {$('#menu').css({'position':'absolute','top':stickToBot +'px'});}});});

注意:如果你想更进一步，我建议你也检查一下这个答案:

设置窗口的 CSS 值限制滚动动画

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.
Here is working jsFiddle to examine.

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:

Setting CSS value limits of the window scrolling animation

这篇关于如何在页面底部构建简单的粘性导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！