jQuery 粘性标题

Question

我正在尝试为我的网站的一个部分实现一个粘性标题，如下所示 demo

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

动态粘性标题

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

只需将此部分添加到页脚并添加 Menu 类即可。

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