根据窗口滚动更改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

我做了一个小提琴。

检查这个小提琴

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;
  });

});

Answer 2

您可以尝试以下方法：

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','top':_triggerOffset - (_scroll-_triggerOffset)});
        }

    });

}

banner();

这段代码未经测试，但我们所做的最初是将元素设置为绝对位置并将该元素的顶部定义为 _triggerOffset，然后我们将当前滚动和 triggerOffset 之间的差值减去向下滚动越多，使栏向上移动的顶部位置。

不确定这是否是您的想法，但我会考虑这样的解决方案。您可能需要在其中添加一些条件，以确保 top 永远不会低于 0，否则导航将离开屏幕。

Answer 3

谢谢，试玩了这两个例子，效果都很好。

最后，我调整了我的代码，而不是将条形位置设为顶部 0px，而是将其置于顶部，像素等于偏移距离。不知道为什么我以前没有想到这一点。

另一方面，我正在将 Shinov 的代码用于另一个项目，因为我非常喜欢它 :)

谢谢

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', 'top':_triggerOffset+'px'});
        }else if (_scroll <= _triggerOffset){
            $('#top-bar').css({'position':'fixed', 'top':'0px'});
        }

    });

}