固定滚动位置的元素在页面加载时会跳出位置

Question

我正在用引导程序制作一个博客页面。页面右侧的三分之一是一列，其中包含类别列表和搜索栏，当您从页面顶部滚动300px时，该栏将变为固定列。这似乎起到了很好的作用，但问题是，当第一次加载页面时，side元素会无缘无故地跳到页面顶部。我认为我的JS代码有问题。

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var objectSelect = $("#wrapnews");
  var objectPosition = objectSelect.offset().top;
    if (scroll > 300) {
     $(".col-md-4").addClass("fix-sidebar");
  } else {
     $(".col-md-4").removeClass("fix-sidebar");
  }
});

以下是CSS以供进一步参考

.fix-sidebar {
  position: fixed !important;
  top: 180px;
  right: 30px;
  width: 360px;
}
.sidenote {
 text-align: center;
 display: block;
 background-color: #ccc;
 color: #fff;
 border: 2px solid #000;
 border-radius: 2px;
 width: 360px;
 }

以及HTMLdivs 的嵌套

  <div class="col-md-4 fix-sidebar" id="wrapnews">
  <div class="sidenote">
  </div>
  </div>

Answer 1

AS col-md-4是浮动的，所以不应该使其位置固定。

因为您将position:fixed添加到.fix-sidebar，所以您应该删除right: 30px;。

var objectSelect = $("#wrapnews"), objectPosition = objectSelect.offset().top;
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();
        if (scroll > objectPosition) {
            objectSelect.addClass("fix-sidebar");
        } else {
            objectSelect.removeClass("fix-sidebar");
        }
    });

@import url('//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
        height: 2000px;
    }
    .wrapnews {
        position: relative;
        top: 180px;
    }
    .fix-sidebar {
        position: fixed !important;
        top: 0;
    }
    .sidenote {
        text-align: center;
        display: block;
        background-color: #ccc;
        color: #fff;
        border: 2px solid #000;
        border-radius: 2px;
        width: 360px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
    <div class="col-md-8" style="background: red;height: 1000px">
        content
    </div>
    <div class="col-md-4">
        <div class="wrapnews" id="wrapnews">
            <div class="sidenote">sidenote
            </div>
        </div>
    </div>
</div>
            

您可以在此处看到在线演示