Question

所以我有这个侧边栏：

<div class="col-md-3">
        <h4 style="color: #404040; font-weight: bold;">
            Guides:
        </h4>
        <div class="sidebar">
             <!--auto-generated <ul>...-->
        </div>
</div>

我希望它在向下滚动时跟随用户。我知道你可以在样式中使用position: fixed;来完成它。但是我有一个标题，所以如果div被修复，即使我向下滚动它也会保持在那个高度。

但如果我向下滚动，它仍然保持在那个固定点。这是我向下滚动时的样子，如下所示：

我希望它保持在最顶层。我读到我应该使用javascript滚动函数，但我完全不知道如何。

Answer 1

您可以使用position: sticky作为简单的“粘性”元素。这是一个新属性，因此它没有最好的浏览器支持，但易于使用且运行良好。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
    .row {
      height: 200vh;
    }
    .row:nth-child(odd) {
      background: #eee;
    }
    .sticky-column {
      position: sticky;
      top: 1em;
    }
</style>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      scroll down
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 sticky-column">
      <h4 style="color: #404040; font-weight: bold;">
            Guides: (look it's sticky!)
        </h4>
      <div class="sidebar">
        <!--auto-generated <ul>...-->
      </div>
    </div>
  </div>
  <div class="row"></div>
</div>

Answer 2

尝试使用position：fixed;在风格和边缘顶部：-30px;或者远离你想要的顶部：像这样的东西

    <body> 
<div class="sidebar" onscroll="dynamicheight()">
</div>

<script>
function dynamicheight() {
var sidebar = document.getElementById("sidebar");
var y = sidebar.scrollTop;
document.getElementById('random').style.height = y;
}
</script>

Answer 3

尝试这样的事情

    var yOffset = $("#sidebar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > yOffset) {
    $("#sidebar").css({
        'top': 0,
        'position': 'fixed'
    });
} else {
    $("#sidebar").css({
        'top': yOffset + 'px',
        'position': 'absolute'
    });
   }
});

试试这个

    position:sticky;

仅在向下滚动时将<div>固定在高度

3 个答案: