0

好的，所以当您滚动经过横幅底部（页面向下约 200 像素）时，我有一个使用 javascript 将标题固定到页面顶部（从而删除横幅）的页面。

在这个网站上，我一直在使用具有位置的容器：继承；属性设置为包含页面的每个部分。然后它们内部有一个相对定位的元素，因此我可以将所有绝对定位的元素放置在我喜欢的地方。

我的问题是当 javascript 将 id="header" 更改为 position:fixed; 时 id="content" 不断跳转到页面顶部；

见这里：www.obsojb.com

我尝试过绝对定位 id="content" 并将其设置为最高值，但它不起作用，我有点卡住了。

这是一个非常简化的 HTML 版本：

<body>
  <div id="page">                <!--inherit-->
    <a id="banner"></a>          <!--inherit-->
    <div id="header">            <!--inherit-->
      <div id="lang">            <!--relative-->
        <ul>...</ul>             <!--inherit-->
        <other divs>             <!--absolute-->
      </div>
      <div id="nav">             <!--relative-->
        <ul>..</ul>              <!--inherit-->
        <a id="userbutton"></a>  <!--absolute-->
      </div>
    </div
    <div id="content0">          <!--inherit-->
      <div id="content">         <!--relative-->
        <PAGE CONTENT>           <!--absolute-->
      </div>
    </div>
    <div id="footer"></div>
  </div>
</body>

这是我的javascript：

var bannerheight // Glob var

window.onload = function() {
    window.bannerheight = $('#bannerimg').height();
    checkOffset();
};

window.onscroll = function(oEvent) {
    checkOffset();
}

function checkOffset() {
    if (window.pageYOffset >= window.bannerheight) {
        document.getElementById("header").style.position = "fixed";
        document.getElementById("banner").style.display = "none";
        document.getElementById("padding").style.height = window.bannerheight+"px";
    }
    else {
        document.getElementById("header").style.position = "inherit";
        document.getElementById("banner").style.display = "block";
        document.getElementById("padding").style.height = "0px";
    }
}

这是相关的CSS：

#page {
    margin:0px auto;
}
#lang {
    position:relative;
}   
#nav {
    position:relative;
    margin:0px auto;
}   
#content0 {
    height:800px;
}
#content {
    position:relative;
    margin:0px auto;
}
4

2 回答 2

1

尝试给内容 div 一个“margin-top”并将其设置为页面“跳跃”的像素数。然后，当您向上滚动并重置位置时，将 margin-top 撤消回零。

我已经对此进行了测试，它解决了我的跳跃问题。

于 2014-09-05T14:23:24.657 回答
0

我不确定您期望的输出是什么，但position: fixed可以在全球范围内处理文档。它不仅忽略了元素流（如position: absolute），而且还忽略了滚动。

position: absolute是相对于它的偏移父级的，它可以是一个带有position: relative.

您通常只想position: fixed在某些东西需要粘在窗口上时使用，例如当您向下滚动页面时会滚动的小弹出窗口。Facebook 标头就是一个很好的例子。它们的标题栏固定在窗口的顶部，即使您滚动也会停留在那里。

于 2013-10-17T16:27:20.860 回答