將上方的div更改為fixed時，如何阻止繼承位置的元素跳出頁面？

Question

好的，所以我有一個頁面，當您滾動到橫幅底部（向下約200像素）時，可以使用javascript將頁眉固定到頁面頂部（從而移除橫幅）。

在這個網站上，我一直在使用具有以下位置的容器：繼承； 屬性設置為包含頁面的每個部分。 然后，這些元素在其中具有相對定位的元素，因此我可以將所有絕對定位的元素放在自己喜歡的位置。

我的問題是，當javascript將id =“ header”更改為position：fixed時，id =“ content”一直跳到頁面頂部。

我已經嘗試過絕對定位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;
}

Answer 1

嘗試為內容div設置“頁邊距”，並將其設置為頁面“跳轉”的像素數。 然后，當您向上滾動並重設位置時，請撤消邊距頂部的置零。

我已經對此進行了測試，它解決了我的跳躍問題。

Answer 2

我不確定您希望得到什么輸出，但不確定position: fixed在文檔中全局范圍內position: fixed 。 它不僅忽略元素流（如position: absolute ），而且忽略滾動。

position: absolute相對於其偏移父級，后者可以是具有position: relative 。

通常，您只想使用position: fixed在需要粘貼到窗口上的東西時position: fixed ，例如當您向下瀏覽頁面時彈出的小彈出窗口。 Facebook標頭就是一個很好的例子。 它們的標題欄固定在窗口的頂部，即使滾動也可以停留在該位置。

將上方的div更改為fixed時，如何阻止繼承位置的元素跳出頁面？

問題描述

2 個解決方案

解決方案1
1 2014-09-05 14:23:24

解決方案2
0 2013-10-17 16:27:20

將上方的div更改為fixed時，如何阻止繼承位置的元素跳出頁面？

問題描述

2 個解決方案

解決方案1 1 2014-09-05 14:23:24

解決方案2 0 2013-10-17 16:27:20

解決方案1
1 2014-09-05 14:23:24

解決方案2
0 2013-10-17 16:27:20