0

私のサイトには固定の水平メニューがあります。Safari で表示すると、下の位置からページの上部にスクロールして戻ると、メニューに続く要素がその下にスクロールします。メニューの高さに等しいマージントップまたはパディングトップをコンテンツ領域に追加すると、下にスクロールした後にのみ問題が修正され、他のブラウザーでは空白スペースが残ります。コンテンツがそのようにメニューの下に表示されないようにするにはどうすればよいですか?

<div class="contain-to-grid sticky fixed">
  <nav class="top-bar" style="">
  </nav>
</div>
<div class="content">
  <div class="fullWidthBar bar3">
  </div>
</div>

CSS

.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 10010;
}
.contain-to-grid {
width: 100%;
background: 
#0D42C0;
border-bottom: 1px solid white; 
}
.top-bar {
max-width: 62.5em;
margin: 0 auto;
margin-bottom: 0;
background: #0D42C0;
overflow: visible;
min-height: 45px; 
}
.bar3 {
background: 
#04297D;
}
.fullWidthBar {
max-width: 100%;
padding-top: 0px;
height: auto;
padding: 2% 0;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
}

サイト

4

1 に答える 1

0

以下のタグfixedでオンとオフを切り替えるクラスを持っているためですdiv

<div class="contain-to-grid sticky fixed">

ページの動作から判断すると、クラスfixedは JavaScript ハンドラによって設定されます。私はそれを設定して、それが常に存在するようにします。それはこの問題を解決します。

于 2013-08-24T17:27:45.647 に答える