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

Question

我正在使用引导程序制作博客页面。页面的右侧三分之一是一个带有类别列表和搜索栏的列，当您从页面顶部滚动 300 像素时，该列将变为固定状态。这似乎运行良好，但问题是当页面首次加载时，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;
 }

以及 HTML div 的嵌套

  <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>
            

你可以看在线演示HERE