位置：中途停止粘滞？

Question

我有一个position: sticky添加了侧边栏的工具栏 ，但是当我滚动超过某个点时，它不再发粘吗？！

已在Chrome版本：61.0.3163.100和Safari版本：11.0中进行测试

HTML：

<div class="sticky">
  this should stick!
</div>

<div class="content">
  this is content
</div>

CSS：

<style media="screen">
  .sticky {
    background-color: #ccc;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 15px;
    width: 100px;
    float: left;
  }

  .content{
    background-color: #eee;
    height: 3000px;
    width: 700px;
    float: right;
  }
</style>

Answer 1

position: sticky;大多数浏览器不支持http://caniuse.com/#feat=css-sticky

你可以尝试这样的事情：

HTML：

<div class="sticky-block">
  this should stick!
</div>

CSS：

.sticky {
   position: fixed;
   top: 15px;
}

JS：

var $stickyBlock = document.querySelector('.sticky-block');
var origOffsetY = $stickyBlock.offsetTop - 15; // 15 is your top margin

function onScroll() {
    window.scrollY >= origOffsetY ? $stickyBlock.classList.add('sticky') :
    $stickyBlock.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);

或jQuery：

var $stickyBlock = $('.sticky-block');
var origOffsetY = $stickyBlock.offset().top - 15;  // 15 is your top margin

function onScroll() {
    window.scrollY >= origOffsetY ? $stickyBlock.addClass('sticky') :
    $stickyBlock.removeClass('sticky');
}

$(document).on('scroll', onScroll);

jsfiddle