0

私は現在、特定の位置にスクロールしたときにサブナビゲーションを固定しようとしています。しかし、その位置に到達すると、その下のすべてが上に移動します。それが何であるかをかなり理解することはできません。非常に単純である可能性があり、私はそれを見ていません。助けてくれてありがとう

CSS

#subnav ul{
list-style: none;
}
#subnav a:visited{
color: #000;
text-decoration: none;
}
#subnav a{
color: #000;
text-decoration: none;
}
#subnav.fixed{
position:fixed;
top:0;
}
.main {
-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
min-height: 500px;
height: auto;
width: 700px;
-moz-box-shadow:    -1px 1px 1px 1px #ccc;
-webkit-box-shadow: -1px 1px 1px 1px #ccc;
box-shadow:         -1px 1px 1px 1px #ccc;
float: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:1000;
    position: relative;
font-size: 12px;
background-color: #FFF;
background-position: left top;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-bottom: -200px;
}

HTML

<div id="subnav">
        <ul>
            content
        </ul>
    </div>

    <div class="main">
        <div class="imageholder">
            content
        </div>

        <div class="text">
            content
        </div>
    </div>

$(document).ready(function () {  
var top = $('#subnav').offset().top -    parseFloat($('#subnav').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();

// whether that's below the form
if (y >= top) {
  // if so, ad the fixed class
  $('#subnav').addClass('fixed');
} else {
  // otherwise remove it
  $('#subnav').removeClass('fixed');
}
});
});
4

2 に答える 2

2

インラインフローから#subnavを取り出しているため、残りは上に移動します。

于 2012-07-05T13:49:22.137 に答える
1

私はこの質問が1.5年前に尋ねられたことを知っています、しかしそれが将来誰かを助けることができる場合に備えてとにかく答えています...

私は最近、サイトで作業しているときにこの同じ問題に遭遇しました。ダニエルが言ったように、あなたが#subnavフローからを削除しているので、それはジャンプアップしています。これは、位置を「固定」に設定することです。#subnav基本的に、要素を完全に削除するのと同じことを実行します。つまり、ジャンプしてギャップを埋めます。

これを修正するために、固定されるポイントまでスクロールすると、固定されている間に基本的に「塗りつぶす」ために、すべて同じ寸法、パディング、マージンなどで新しいdivを作成しました#subnav。これはいくつかの方法で行うことができます。「fixed」クラスを追加/削除するときに表示/非表示にする別のIDで重複する非表示のdivを作成するか、JSを使用してオンザフライで動的に作成します。選択の修正がここにあるものは何でも、これはジャンプの問題を防ぎます。

例：

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y >= top) {
      $('#subnav').addClass('fixed')
        .after("<div id='filler'></div>");    // Add the new "filler" div

      // Make the height, width, padding-top, padding-bottom, margin-top, and
      // margin-bottom the same as the #subnav
      $('#filler')
          .css("height", $('#subnav').css("height"))
          .css("width", $('#subnav').css("width"));    // etc

    } else {
      $('#subnav').removeClass('fixed');

      // Remove the filler
      $('#filler').remove();    // Or you can hide and show it again as needed
    }
});

お役に立てれば。乾杯！

于 2014-01-17T09:04:48.617 に答える