0

我目前正试图让 subnav 在滚动到某个位置时粘住。但是当它到达那个位置时，它下面的所有东西都会向上移动。不能完全弄清楚它是什么。可能很简单，我只是没看到。谢谢您的帮助

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 年前提出的，但无论如何我都会回答，以防它将来可以帮助某人......

我最近在网站上工作时遇到了同样的问题。就像 Daniel 说的那样，它正在跳跃，因为您正在#subnav从流程中移除，这就是将位置设置为“固定”的作用。它本质上与您完全移除元素所做的相同#subnav：跳起来填补空白。

为了解决这个问题，当滚动到它变得固定的那个点时，我创建了一个具有所有相同尺寸、填充、边距等的新 div，以便在#subnav固定时基本上“填充”。您可以通过多种方式执行此操作：创建一个具有不同 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 回答