Question

我正在制作一个带引导程序的博客页面。页面右侧三分之一是一个列，其中包含类别列表和搜索栏，当您从页面顶部滚动300px时，该列将变为固定。这似乎运行良好，但问题是，当页面首次加载时，侧面元素跳转到页面顶部没有明显的原因。我认为我的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 divs的嵌套

  <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

修复滚动位置的元素在页面加载时跳出位置

1 个答案: