jquery - jQuery 粘性标题

Question

我正在尝试为我的网站的一部分实现一个粘性标题，例如这个演示

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"
           });      
       };
   });
}

// DOM Ready      
$(function() {

   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");

});

但是粘性并没有流过整个容器，我的布局中有一个空白空间。

链接： http: //play.mink7.com/sophiance/

Answer 1

一方面，您缺少修复浮动标题的 CSS。这将修复您的菜单，您将不得不在空白处更深入地挖掘

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

演示没有涵盖 css 部分

Answer 2

动态置顶标题

jQuery(document).ready(function() {
    //Enter Your Class or ID
    var $stickyMenu = jQuery('.main-nav');

    var stickyNavTop = jQuery($stickyMenu).offset().top;

    //Get Height of Navbar Div
    var navHeight = jQuery($stickyMenu).height();

    var stickyNav = function(){
        var scrollTop = jQuery(window).scrollTop();
        if (scrollTop > stickyNavTop) { 
            jQuery($stickyMenu).addClass('sticky');
            jQuery('html').css('padding-top', navHeight + 'px')
        } else {
            jQuery($stickyMenu).removeClass('sticky');
            jQuery('html').css('padding-top', '0')
        }
    };

    stickyNav();

    jQuery(window).scroll(function() {
        stickyNav();
    });
});

只需将此部分添加到您的页脚并添加菜单类。

演示：http: //jsfiddle.net/cybentizen/Lxrn3nkL/

Answer 3

我看不到任何具有以下 css 属性的类。

position:fixed and top:0 

我想您应该尝试在其中添加这些属性

.floatingHeader