Question

我有一个标题和下面的横幅。在这个横幅下面，我有我的内容。因此，当我滚动横幅时应该消失（在我的情况下，我增加了标题的z索引，所以横幅基本上隐藏在它后面）当你滚动内容时应该出现与标题合并。所以我能用很少的CSS做到这一点。

现在，当我的内容div与标题合并时，我希望它粘在那里，然后整个页面应该向上滚动。

当前的CSS滚动

#header {
    height: 100px;
    background: #bdbdbd;
    position: fixed;
    width: 100%;
    z-index: 10;
}

#banner {
    width: 100%;
    height: 300px;
    position: fixed;
    top: 100px;
    background: #707070;
}

#content {
    width: 100%;
    position: relative;
    top: 400px;
    background: #ebebeb;
    height: 1500px; /* Demo purposes */
}

我如何实现这一目标？

Answer 1

试试这个：

<style type="text/css">
#header {
    height: 100px;
    background: #bdbdbd;
    position: fixed;
    width: 100%;
    z-index: 9999;
    top:0px;
}

#content {
    width: 100%;
    position: relative;
    margin-top:100px;
    background: #ebebeb;
}
#banner {
    position:relative;
    width: 100%;
    height: 300px;
    background: #707070;
}

#banner.stick {
    position: fixed;
    top: 100px;
    z-index: 1000;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}
</style>

这是身体：

<body style="padding:0px; margin:0px;">
<div id="header">This is header</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
    lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
    lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
    Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
    non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
    Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
    ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
    gravida.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>

<div id="sticky-anchor"></div>
<div id="banner">This will stay at top of page</div>

<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p>

</div>
<script type="text/javascript">
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top-100;
    if (window_top > div_top) {
        $('#banner').addClass('stick');
    } else {
        $('#banner').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
</script>   
</body>

滚动后如何修复标题下方的div？

1 个答案: