javascript - 根据窗口滚动更改 div 顶部边距

Question

我的页面顶部有一个位置固定的栏。当用户滚动到某个点时，我希望该栏开始向上移动，就好像它是相对或绝对定位的一样。

现在，栏的 css 从固定位置更改为绝对定位，但这当然会将 div 直接设置到页面顶部。

我已经研究这个问题很多年了，但无法理解如何为滚动超过 _triggerOffset 的每个像素一次将栏向上推一个像素

谁能启发我吗？

function banner(){

    var _barOffset = $('#top-bar').outerHeight(),
        _navOffset = $('#navigation').offset().top,
        _triggerOffset = _navOffset-_barOffset;

    $(window).scroll(function() {

        var _scroll = $(window).scrollTop();

        if (_scroll >= _triggerOffset) {
            $('#top-bar').css({'position':'absolute'});
        }

    });

}

banner();

Answer 1

我已经完成了 fiddle 。

检查这个 fiddle

<强> Working Demo

$(document).ready(function() {
  var postionToTriggerMove = 500;
  var positioninitial = $(window).scrollTop();
  var positioninitialLine = $(".line").offset().top;
  $(window).scroll(function() {
    var _scroll = $(window).scrollTop();
    if(_scroll > positioninitial) {        
       if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) )
          {
              var topBarPostion = $(".line").offset().top;
              $('.line').css({'position':'absolute',"top":topBarPostion});
          }
   }
   else {
       if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) )
          {
              var topBarPostion = $(".line").offset().top;
              $('.line').css({'position':'fixed',"top":positioninitialLine});
          }

  }
  positioninitial = _scroll;
  });

});