1

このデモのように、ウェブサイトのセクションにスティッキー ヘッダーを実装しようとしています。

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/

ここに画像の説明を入力

4

3 に答える 3

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

このセクションをフッターに追加し、Menu クラスを追加するだけです。

デモ: http://jsfiddle.net/cybentizen/Lxrn3nkL/

于 2015-12-09T06:52:29.620 に答える
2

1 つには、フローティング ヘッダーを修正するための CSS がありません。これでメニューが修正され、空のスペースをさらに掘り下げる必要があります

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

デモはCSS部分をカバーしていませんでした

于 2013-06-24T19:14:34.913 に答える
1

次の css 属性を持つクラスが表示されません。

position:fixed and top:0

これらの属性をこれに追加しようとする必要があると思います

.floatingHeader
于 2013-06-24T19:25:36.473 に答える