Javascript 根据窗口滚动更改div的边距顶部

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

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

我已经看了很多年了，我不知道如何在滚动过触发偏移量的每一个像素时，一次向上推一个像素

谁能启发我

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

---

您可以尝试以下方法：

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

您可以尝试以下操作：

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

我做了一个小动作

检查这把小提琴

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

});

$（文档）.ready（函数（）{
var PostionTriggerMove=500；
var positioninitial=$（window.scrollTop（）；
var positioninitialLine=$（“.line”）.offset（）.top；
$（窗口）。滚动（函数（）{
var_scroll=$（window.scrollTop（）；
如果（_scroll>positioninitial）{
如果（_scroll>=（postinottriggermove-5）和（_scroll=（postinottriggermove-5）和&&u scroll我做了一把小提琴

检查这把小提琴


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

});

$（文档）.ready（函数（）{
var PostionTriggerMove=500；
var positioninitial=$（window.scrollTop（）；
var positioninitialLine=$（“.line”）.offset（）.top；
$（窗口）。滚动（函数（）{
var_scroll=$（window.scrollTop（）；
如果（_scroll>positioninitial）{
如果（_scroll>=（PostionTriggerMove-5）和&&（PostionTriggerMove-5）和&&&&&（PostionTriggerMove-5）&&&&&&u scroll谢谢，我们对这两个示例都进行了尝试，它们的效果非常好

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

另一方面，我正在为另一个项目使用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'});
        }

    });

}

function banner（）{
var_barOffset=$（“#顶栏”）.outerHeight（），
_navOffset=$（“#导航”）.offset（）.top，
_triggerOffset=\u导航偏移-\u气压偏移；
$（窗口）。滚动（函数（）{
var_scroll=$（window.scrollTop（）；
如果（\u滚动>=\u触发偏移）{
$（“#顶栏”）.css（{'position'：'absolute'，'top'：_triggerOffset+'px'}）；
}否则，如果（_scroll谢谢，对这两个例子都进行了尝试，它们的效果非常好

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

另一方面，我正在为另一个项目使用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'});
        }

    });

}

function banner（）{
var_barOffset=$（“#顶栏”）.outerHeight（），
_navOffset=$（“#导航”）.offset（）.top，
_triggerOffset=\u导航偏移-\u气压偏移；
$（窗口）。滚动（函数（）{
var_scroll=$（window.scrollTop（）；
如果（\u滚动>=\u触发偏移）{
$（“#顶栏”）.css（{'position'：'absolute'，'top'：_triggerOffset+'px'}）；
}否则，如果（_scroll）我也很抱歉花了这么长时间在这个线程上回复你们，整个周末我的互联网都断开了。我也很抱歉花了这么长时间在这个线程上回复你们，整个周末我的互联网都断开了。