jQuery Sticky Header

Question

我正在尝试为我的网站部分实现Sticky Header，例如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");

});

但是Stickyness并没有流到整个容器中，我的布局中有一个空白区域。

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

Answer 1

首先，你缺少用于修复floatingHeader的CSS。这将修复你的菜单，你将不得不深入挖掘空白区域

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

该演示未涵盖css部分

Answer 2

Dynamic Sticky Header

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