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之间的差异并从中减去向上滚动的位置使得栏向上移动的最高位置。

不确定这是不是你的想法，但我会看到这样的解决方案。您可能希望在其中添加一些条件以确保顶部永远不会低于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'});
        }

    });

}

根据窗口滚动更改div的上边距

3 个答案: