jquery - 固定位置不起作用

Question

我正在尝试实现本教程中的持久 header :http://css-tricks.com/persistent-headers/

我的标记:

    <div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area">
       <h2 class="persist-header">rgergergerg</h2>  
       <div class="nom-img">
         <a href="ergeg.html"><img src="img/ergerg.jpg"></a>
       </div>
       <div class="tag-nom postCenter"> <a href="#"><img src="img/erg.png"></a>
         <h4><a href="#">serger</a></h4>
       </div>
    </div>

<div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area">
       <h2 class="persist-header">rgergergerg</h2>  
       <div class="nom-img">
         <a href="ergeg.html"><img src="img/ergerg.jpg"></a>
       </div>
       <div class="tag-nom postCenter"> <a href="#"><img src="img/erg.png"></a>
         <h4><a href="#">serger</a></h4>
       </div>
    </div>

jQuery

var clonedHeaderRow;

       $(".persist-area").each(function() {
           clonedHeaderRow = $(".persist-header", this);
           clonedHeaderRow
             .before(clonedHeaderRow.clone())
             .css("width", clonedHeaderRow.width())
             .addClass("floatingHeader");

       });

       $(window)
        .scroll(UpdateTableHeaders)
        .trigger("scroll");




    function UpdateTableHeaders() {
       $(".persist-area").each(function() {

           var el             = $(this),
               offset         = el.offset(),
               scrollTop      = $(window).scrollTop(),
               floatingHeader = $(".floatingHeader", this)

           if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
               floatingHeader.css({
                "visibility": "visible"
               });
           } else {
               floatingHeader.css({
                "visibility": "hidden"
               });      
           };
       });
    }

CSS

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

问题是即使固定位置处于事件状态，它也不起作用。标题没有固定就上升了。可能是什么问题？

Answer 1

这是一种非常复杂的方法。它可以更容易地完成

你基本上只需要一个额外的 div 来节省标题大小以防止页面滑动

<div class="persistent">
   <nav>
      <ul>
         <li><a href="#alfa" class="button"><span>ALFA</span></a></li>
      </ul>
   </nav>
</div>

<div class="persistent">
   <nav>
      <ul>
         <li><a href="#beta" class="button"><span>ALFA</span></a></li>
      </ul>
   </nav>
</div>

然后，你只需要一个简单的 jQuery

    function fixMenu()
{
  $('.persistent').each(function(){

    var menu_place = $(this).offset().top;
    var menu = $(this).find('nav'); 

    $(window).scroll(function(){

        var scroll_top = $(window).scrollTop(); 

        if ( scroll_top > menu_place )
            {
                menu.css({ 'position': 'fixed', 'top':0 });
            }
        else
            {
                menu.css({ 'position': 'relative' }); 
            }
    });
}

您需要做的只是从文档就绪中调用函数 fixMenu()