0

スクロール中にヘッダーが固定されているという問題がありますが、下にスクロールすると、別の領域の位置が絶対であるため、ヘッダーが固定されません。

私のHTML：

<div class="titleBar">
 <div class="container">
 <h1 class="titleBar-title">Title 1</h1>
 <p class="titleBar-subTitle">Title 2</p>
</div>

<div id="subnav">
 <div class="subnav-inner">
   <ul class="subnav-list nav">
     <li><a href="#salt">Salt</a></li>
     <li><a href="#pepper">Pepper</a></li>
   </ul>
 </div>
</div>
</div>

私のCSS：

.subnav-fixed {
position: fixed;
bottom: auto;
top: 0;
padding-top: 10px;
z-index: 99;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 40px 0 rgba(0,0,0,0.15);
}

#subnav {
width:100%;
height:40px;
background:#FFF;
position: absolute;
bottom:0;
left:0;
z-index:99;
}

ここに私のJavaScriptがあります:

var myHeader = $('#subnav');
myHeader.data( 'position', myHeader.position() );
$(window).scroll(function(){
    var hPos = myHeader.data('position'), scroll = getScroll();
    if ( hPos.top < scroll.top ){
        myHeader.addClass('subnav-fixed');
    }
    else {
        myHeader.removeClass('subnav-fixed');
    }
});

function getScroll () {
    var b = document.body;
    var e = document.documentElement;
    return {
        left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
        top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
    };
}

この投稿から取得したものは、スクロール中にヘッダーを修正しました

「サブナビ」を維持したいのですが、position:absoluteどうすればよいですか? JavaScript を変更する必要があるように感じますが、何を入力すればよいかわかりません。

4

2 に答える 2

2

これは、私が自分のサイトjsFiddleで行った方法です

$(window).scroll(function () {
    $('#sticky').toggleClass('scrolling', $(window).scrollTop() > $('#stickyX').offset().top);

});


 .scrolling {
    position: fixed;
    top: 0px;
    width: 98%;
    max-width: 940px;
    z-index:99999999999;
    transition:all 1s;
}
于 2013-03-28T17:23:43.617 に答える
0

CSS のみのソリューション ( webkitposition: sticky;のみ、atm.) と必要な JS フォールバックを確認してください。

于 2013-03-28T17:29:13.220 に答える