Question

我一直试图找出正确的方法来做到这一点。三个div，广告Div位于顶部，Header Div位于下方，Content Div位于最下方。在pg加载我打算让广告div显示，但在滚动时我打算保持标题div在位置固定，顶部：0px，即在页面顶部的内容。

我知道在CSS中使用固定位置，但是我需要它的方式与此属性相矛盾，因为我需要将标题div进一步向上移动直到页面顶部滚动并保持位置固定在那里。

我也意识到将所有三个div放在一起的可能性，并且在滚动时，使用jquery我将隐藏广告div并且自然地头部div将向上移动并保持其位置固定属性

有什么建议吗？ JS Fiddle link here for a quick example

Answer 1

你可以这样做（使用你的例子）：

HTML：

<div id="advert-con">
<h3>
    <br />
    <br />
    ADVERT DIV MUST BE OVERLAYED WITH BLACK DIV UPON SCROLLING </h3>
</div>
<!--end advert-con-->
<div id="header-con">
    <h2>
        <br />
        <br />
        HEADER DIV MUST REMAIN VISIBLE ON TOP</h2>
</div>
<!--end header-con-->
<div id="content-con">
    <h4>Content Words Text Context</h4>
</div>
<!--end content-con-->

Jquery的：

$(document).ready(function () {
   var header = $('#header-con');
   var distanceFromTop;
   if (header.length > 0)
   {
       distanceFromTop = header.offset().top;
   }
   $(window).scroll(function () {
       if (header.length > 0)
       {
           header.toggleClass('sticky-top', $(window).scrollTop() > distanceFromTop);
       }
   });
});

CSS：

.sticky-top {
    position: fixed;
    top: 0;
    width:100%;
}

希望有所帮助：）

Answer 2

这是代码

$(document).ready(function () {
    var top_fixed;
    if ($('#header-con').length > 0)
    {
        top_fixed = $('#header-con').offset().top;
    }
    $(window).scroll(function () {
        if ($('#header-con').length > 0)
        {
            $('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed);
        }
    });
});

<强> DEMO

更清晰的CSS

*{
    margin:0;
    padding:0;
}

#advert-con { color:yellow;height:130px;background:blue;width:100%;margin:0px;padding:0px;display:block; }
#header-con { height:170px;background:black;color:#fff!important;margin:0px;padding:0px; }
#content-con { height:700px;background:purple; }

.fixed {
    position: fixed;
    top: 0;
    width:100%;
}

<强> UPDATED DEMO

制作#advert-con fixed

.container{
    margin-top:130px;
    display:inline-block;
    width:100%;
}
.container:after{
    display:block;
    clear:both;
    content:"";
}

<强> FINAL DEMO

标题Div位置固定在页面顶部但在加载时显示顶部的div

2 个答案: