Javascript 可变高度的粘性收割台

因此，我需要有一个始终显示在视口顶部的标题，即使用户向下滚动。这一点相当简单，使用如下方式：

body {
    padding-top: 100px; /* height of the header */
}

#header {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px; /* Half the width of the header */
    width: 1000px;
    height: 100px;
}

<div id="header">
    <img src="#" class="top_banner" />
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

<div id="header">
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

然而，现在我的问题是，我并不总是知道标题有多高，因为客户希望也有一个顶部横幅广告，但这可能并不总是存在

因此，有时标题可能如下所示：

body {
    padding-top: 100px; /* height of the header */
}

#header {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px; /* Half the width of the header */
    width: 1000px;
    height: 100px;
}

<div id="header">
    <img src="#" class="top_banner" />
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

<div id="header">
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

网站标志

有时可能是这样的：

body {
    padding-top: 100px; /* height of the header */
}

#header {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px; /* Half the width of the header */
    width: 1000px;
    height: 100px;
}

<div id="header">
    <img src="#" class="top_banner" />
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

<div id="header">
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

网站标志

好消息是横幅广告将始终具有相同的尺寸。所以基本上，如果没有横幅，标题可以是100px，如果有横幅，标题可以是250px

我的问题是：有没有一个好的CSS方法来解决这个问题？如果不是，我如何使用Javascript解决它

$(document).ready(function(){
 $('body').css('padding-top', $('#header').height() + 'px');
});

这可以帮助你

（懒散的回答）

根据是否有图像，更改

#header

div的类名

CSS

有形象

<div id="header" class="header_with_image">
    <img src="#" class="top_banner" />
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

网站标志

无图像

<div id="header" class="header_no_image">
    <div id="headerbar">
        <h1>Site logo</h1>
    </div>
</div>

网站标志

---

可能有一个更好的解决方案，但这会起作用…

不确定CSS，但此javascript应该为您完成基本工作：

document.body.style.paddingTop = document.getElementById('header').offsetHeight + 'px';

---

我编写了一个jquery插件来解决这种问题：

---

看看这是否对你有用。

这确实有点粗糙，但我喜欢创造性思维。我会投你一票，因为这会奏效的。但我认为我会选择其他解决方案之一，因为它们更适合未来（以防有一天它们决定推出不同大小的广告，或以某种方式改变利润率）。如果有第三种选择，那么之后会变得一团糟，以此类推，谁知道还有什么，也许横幅不会总是有相同的高度……我知道，我确实说过这并不完美（甚至不好），但它确实满足了OP的要求……你有没有尝试过

最小高度

&

最大高度

而不是使用固定的

高度

作为

#标题

@Ahsan Rathod这不是问题所在。这只是一个例子。实际上，收割台宽度是可变的（只是变化不大，所以实际上是两种尺寸之一）。问题是我不知道标题有多高，所以主体顶部的填充不正确，必须使用Javascript更新。