javascript - 当可折叠页眉不再出现在页面上时，我可以让我的固定页眉滚动吗？

Question

现在，我们都经常看到可折叠的标题。我真的很喜欢它给页面带来的效果，它提供了更多的部门。我想实现这种部门效果，但我并不真正需要固定标题的功能。

现在我已经看到了可折叠的标题，一旦可折叠的标题离开页面，固定标题就会变小。是否可以在可折叠标题离开页面时使固定标题不再固定？并使其与其余内容一起滚动离开页面？

Answer 1

我已经尝试过了，我希望这是你想要的。点击下面的链接进行演示。。

演示

这是 HTML

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

这里是 CSS ..

#headerSlideContainer {
    position: absolute;

    top:0px;
    width: 100%;

   height:1000px;
    background: black;
}
#headerSlideContent {
    width: 900px;
    height: 50px;
    margin: 0 auto;
    color: white;
    background:Red;
    z-index:10000;
    position:fixed;
}

#new{
    top:60px;
    z-index:2;
    height:100px;
    background:Orange;
    position:absolute;
    color: white;

}

n这是Javascript ..

$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollTop() > 50) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});