Question

我正在尝试在滚动到某个位置时让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');
}
});
});

Answer 1

其余部分向上移动，因为你正在将#subnav从内联流中取出。

Answer 2

我知道这个问题是在1。5年前被问过的，但无论如何我都会回答，以防将来可以帮助某人......

我最近在网站上工作时遇到了同样的问题。就像丹尼尔说的那样，它正在跳跃，因为你正在从流程中移除#subnav，这就是将位置设置为“固定”的情况。它基本上就像你完全删除你的#subnav元素一样：跳起来填补空白。

为了解决这个问题，当滚动到它固定的那一点时，我创建了一个具有所有相同尺寸，填充，边距等的新div，以便在#subnav被修复时基本上“填充”。您可以通过以下几种方式执行此操作：创建一个重复的隐藏div，其中包含您在添加/删除“固定”类时显示/隐藏的不同ID，或者使用JS动态创建一个ID。无论你选择什么样的选择，这都可以防止跳跃问题。

示例：

$(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
    }
});

希望这会有所帮助。干杯！

滚动时固定的元素

2 个答案: