0

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

现在，栏的 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();
4

3 回答 3

2

我做了一个小提琴。

检查这个小提琴

工作演示

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

});
于 2013-07-05T06:08:10.233 回答
1

您可以尝试以下方法：

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 或导航将离开屏幕。

于 2013-07-05T05:09:17.607 回答
0

谢谢，玩了两个例子，他们工作得很好。

最后，我调整了我的代码，而不是将条形位置设为顶部 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'});
        }

    });

}
于 2013-07-07T22:03:12.820 回答