Question

我有一个问题，我在滚动时有一个固定的标题，但是当你向下滚动时，标题没有固定，因为另一个区域位置是绝对的。

我的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需要改变，但我不确定要输入什么。

Answer 1

这就是我在我的网站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;
}

Answer 2

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

滚动定位时固定标题

2 个答案: