0

わかりましたので、バナーの下部 (約 200px 下のページ) を過ぎてスクロールすると、javascript を使用してヘッダーをページの上部に固定する (したがって、バナーを削除する) ページがあります。

この Web サイトでは、position:inherit; を持つコンテナーを使用しています。ページの各部分を含むように設定されたプロパティ。これらの内部には相対的に配置された要素があるため、絶対に配置されたすべての要素を好きな場所に配置できます。

私の問題は、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

content div に「margin-top」を指定して、ページが「ジャンプ」しているピクセル数に設定してみてください。次に、上にスクロールして位置をリセットするときに、margin-top を元に戻してゼロに戻します。

これをテストしたところ、ジャンプの問題が解決しました。

于 2014-09-05T14:23:24.657 に答える