Question

在向下滚动一定数量的像素后，我希望我的导航栏固定在顶部。我从现有的类似问题中得到了这个JQ片段，但它并不适合我。我将它绑定到正确的div吗？有没有办法专门使用Bootstrap？只是为了说明我想要的东西，它就是这个小提琴（不是我的）：http://jsfiddle.net/jpXjH/6/

  <div id="nav-wrapper"><!--nav-wrapper-->
        <div class="container"><!--container-->
            <div class="row" id="navigation"><!--header-->
                <div class="col-md-12"><!--col-md-12-->
                    <div class="nav"><!--nav-->
                        <div class="#"><ul id="#"><li id="#" class="..."><a href="...">Home</a></li>
    <li id="menu-item-6478" class="..."><a href="...">About EFTI</a></li>
    <li id="menu-item-27" class="..."><a href="...">Our Coaches</a></li>
    <li id="menu-item-6469" class="..."><a href="...">Blog</a></li>
    <li id="menu-item-6568" class="..."><a href="...">EFTI Forum</a></li>
    <li id="menu-item-6477" class="..."><a href="...">Contact Us</a></li>
    </ul></div>                </div><!--nav-->
                </div><!--col-md-12-->
                <div class="clearfix"></div>
            </div><!--header-->
        </div><!--container-->
    </div>

JS：

$(function() {
    var elementPosition = $('.col-md-12').offset();

    $(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
            $('.col-md-12').css({'position':'fixed','top':'0'});
        } else {
            $('.col-md-12').css('position','static');
        }    
    });
});

Answer 1

为什么不使用新的position:sticky，它将成为CSS4的一部分，which can easily be polyfilled可以与现有的浏览器配合使用？

Answer 2

我为网站制作了这个功能（ID已经调整过）：

var headerHeight = $('#header').outerHeight();
$(window).scroll(function () {
    var headerPos = $('#header').offset().top;
    if ($(window).scrollTop() > headerPos + headerHeight) {
        $('#nav-wrapper').css("top", "0");
    } else $('#nav-wrapper').css("top", headerPos + headerHeight - $(window).scrollTop());
});

现场演示：http://jsfiddle.net/p86zvs3z/2/

向下滚动以固定在顶部的导航栏

2 个答案: