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

取自这篇文章Fixed header while scroll

我想保留 'subnav'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

查看position: sticky;纯 CSS 解决方案（仅限 webkit，atm。）和必要的 JS 后备。

于 2013-03-28T17:29:13.220 回答