Question

在我的容器中有部分/框，但是当其他框都不可见时，这些框中的最后一个框应该跟随滚动。

因此，当用户向下滚动时，他会看到正常的侧边栏，但是当用户已经足够下降时，侧边栏会结束，但最后一个框开始跟随屏幕顶部。我在不同类型的网站上看到了很多。

我的代码：

$(window).scroll(function(){
    $.each($('.follow-scroll'),function(){
        var eloffset = $(this).offset();
        var windowpos = $(window).scrollTop();
        if(windowpos<eloffset.top) {
            var finaldestination = 0;
        } else {
            var finaldestination = windowpos;
        }
        $(this).stop().animate({'top':finaldestination},200);
    });
});

Answer 1

由于这个问题获得了很多观点，并且在投票最多的答案中链接的教程似乎处于脱机状态，我花时间来清理这个脚本。

在此处观看： JSFiddle

JavaScript的：

(function($) {
    var element = $('.follow-scroll'),
        originalY = element.offset().top;

    // Space between element and top of screen (when scrolling)
    var topMargin = 20;

    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();

        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);

Answer 2

在https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/上有一个很棒的jQuery教程。

它复制Apple.com购物车类型的侧边栏滚动。可能为您提供良好服务的Google查询是“固定浮动侧边栏”。

Answer 3

根据我的拙见，解决方案可归结为此：

var el=$('#follow-scroll');
var elpos=el.offset().top;
$(window).scroll(function () {
    var y=$(this).scrollTop();
    if(y<elpos){el.stop().animate({'top':0},500);}
    else{el.stop().animate({'top':y-elpos},500);}
});

我已经改变了el的任务，因为再次以我的拙见，按阶段找到一个元素并不是一个很好的习惯。如果你只想要一个元素通过id找到它。如果你想迭代一组元素，那么按类找到它们。

我使用this来保持我的代码很小，但希望可读！

请注意 - 我的答案在这里指的是当时接受的答案（目前仍然是已接受的答案，但此后已被编辑，因此我的答案不再“归结”您所看到的内容@Martti Lane在这个页面上的答案;我的答案“归结”了他原来的，接受的答案;你可以看一下@ Martti答案的编辑历史，如果你对我“煮沸”的内容感兴趣的话。）

Answer 4

这对我来说就像一个魅力。

<强> JavaScript的：

$(function() { //doc ready
    if (!($.browser == "msie" && $.browser.version < 7)) {
        var target = "#floating", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
        $(window).scroll(function(event) {
            if (top <= $(this).scrollTop()) {
                $(target).addClass("fixed");
            } else {
                $(target).removeClass("fixed");
            }
        });
    }
});

<强> CSS：

#floating.fixed{
    position:fixed;
    top:0;
}

来源： http://jqueryfordesigners.com/fixed-floating-elements/

Answer 5

这是我的最终代码....（基于之前的修复，非常感谢大家为headstart，节省了大量的时间进行实验）。让我烦恼的是向上滚动，以及向下滚动......：）

它总是让我想知道jquery如何优雅!!!

$(document).ready(function(){

    //run once
    var el=$('#scrolldiv');
    var originalelpos=el.offset().top; // take it where it originally is on the page

    //run on scroll
     $(window).scroll(function(){
        var el = $('#scrolldiv'); // important! (local)
        var elpos = el.offset().top; // take current situation
        var windowpos = $(window).scrollTop();
        var finaldestination = windowpos+originalelpos;
        el.stop().animate({'top':finaldestination},500);
     });

});

Answer 6

这是我的解决方案（希望它即插即用）：

复制JS代码部分
添加＆＃39;滑动滚动＆＃39;类到你想要的元素
在JS代码中进行像素完美修正
希望你会喜欢它！

＆＃13;

// SlideAlongScroll
var SlideAlongScroll = function(el) {
  var _this = this;
  this.el = el;
  // elements original position
  this.elpos_original = el.parent().offset().top;  
  // scroller timeout
  this.scroller_timeout;
  // scroller calculate function
  this.scroll = function() {
    // 20px gap for beauty
    var windowpos = $(window).scrollTop() + 20;
    // targeted destination
    var finaldestination = windowpos - this.elpos_original;
    // define stopper object and correction amount
    var stopper = ($('.footer').offset().top); // $(window).height() if you dont need it
    var stophere = stopper - el.outerHeight() - this.elpos_original - 20;
    // decide what to do
    var realdestination = 0;
    if(windowpos > this.elpos_original) {
      if(finaldestination >= stophere) {
        realdestination = stophere;
      } else {
        realdestination = finaldestination;
      }
    }
    el.css({'top': realdestination });
  };
  // scroll listener
  $(window).on('scroll', function() {
    // debounce it
    clearTimeout(_this.scroller_timeout);
    // set scroll calculation timeout
    _this.scroller_timeout = setTimeout(function() { _this.scroll(); }, 300);
  });
  // initial position (in case page is pre-scrolled by browser after load)
  this.scroll();
};
// init action, little timeout for smoothness
$(document).ready(function() {
  $('.slide-along-scroll').each(function(i, el) {
    setTimeout(function(el) { new SlideAlongScroll(el); }, 300, $(el));
  });
});

＆＃13;

/* part you need */
.slide-along-scroll {
  padding: 20px;
  background-color: #CCCCCC;
	transition: top 300ms ease-out;
	position: relative;
}
/* just demo */
div {  
  box-sizing: border-box;
}
.side-column {
  float: left;
  width: 20%;    
}
.main-column {
  padding: 20px;
  float: right;
  width: 75%;
  min-height: 1200px;
  background-color: #EEEEEE;
}
.body {  
  padding: 20px 0;  
}
.body:after {
  content: ' ';
  clear: both;
  display: table;
}
.header {
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid #CCCCCC;  
}
.footer {
  padding: 20px;
  border-top: 2px solid #CCCCCC;
  min-height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="header">
      <h1>Your super-duper website</h1>
  </div>
  <div class="body">  
    <div class="side-column">
        <!-- part you need -->
        <div class="slide-along-scroll">
            Side menu content
            <ul>
               <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
               <li>Aliquam tincidunt mauris eu risus.</li>
               <li>Vestibulum auctor dapibus neque.</li>
            </ul>         
        </div>
    </div>
    <div class="main-column">
        Main content area (1200px)
    </div>
  </div>
  <div class="footer">
      Footer (slide along is limited by it)
  </div>
</div>

＆＃13;

Answer 7

该代码效果不佳我修了一下

var el = $('.caja-pago');
var elpos_original = el.offset().top;

 $(window).scroll(function(){
     var elpos = el.offset().top;
     var windowpos = $(window).scrollTop();
     var finaldestination = windowpos;
     if(windowpos<elpos_original) {
         finaldestination = elpos_original;
         el.stop().animate({'top':400},500);
     } else {
         el.stop().animate({'top':windowpos+10},500);
     }
 });

Answer 8

我需要div才能在到达某个对象时停止，所以我这样做了：

var el = $('#followdeal');
    var elpos_original = el.offset().top;
    $(window).scroll(function(){
        var elpos = el.offset().top;
        var windowpos = $(window).scrollTop();
        var finaldestination = windowpos;
        var stophere = ( $('#filtering').offset().top ) - 170;
        if(windowpos<elpos_original || windowpos>=stophere) {
            finaldestination = elpos_original;
            el.stop().animate({'top':10});
        } else {
            el.stop().animate({'top':finaldestination-elpos_original+10},500);
        }
    });

Answer 9

我为此写了一个相对简单的答案。

我有一张表使用了＆＃34;粘性表格标题＆＃34;插件紧贴在我页面上特定div的下方，但是表格左侧的菜单并没有坚持（因为它不是表格的一部分。）

就我的目的而言，我知道需要的东西＆＃34;粘性＆＃34;总是在窗口顶部下方385像素处开始，所以我在上方创建了一个空div：

<div id="stopMenu" class="stopMenu"></div>

然后跑了这个：

$(window).scroll(function(){   
   if ( $(window).scrollTop() > 385 ) {
    extraPadding = $(window).scrollTop() - 385;
    $('#stopMenu').css( "padding-top", extraPadding );
   } else {
     $('#stopMenu').css( "padding-top", "0" );
   }
});

当用户滚动时，它会将$(window).scrollTop()的值添加到整数385，然后将该值添加到stopMenu div之上我希望保持专注。

如果用户一直向上滚动，我只需将额外的填充设置为0。

这并不要求用户特别在CSS中做任何事情，但这会产生很小的延迟效果，所以我也把class="stopMenu"放进去了：< / p>

.stopMenu {
  .transition: all 0.1s;
}

如何让div跟随jQuery顺利滚动？

9 个答案: