如何让div跟随jQuery顺利滚动？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让div跟随jQuery顺利滚动？相关的知识，希望对你有一定的参考价值。
在我的容器中有部分/框，但是当没有其他框可见时，这些框中的最后一个框应该跟随滚动。
因此，当用户向下滚动时，他会看到正常的侧边栏，但是当用户已经足够下降时，侧边栏会结束，但最后一个框开始跟随屏幕顶部。我在不同类型的网站上看到了很多。
我的代码目前：
$(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);
});
});
由于这个问题得到了很多观点，并且在投票最多的答案中链接的教程似乎是脱机的，我花时间来清理这个脚本。
在这里看到它：JSFiddle
(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);
我为此写了一个相对简单的答案。
我有一个表使用其中一个“粘性表头”插件粘在我页面上特定div的正下方，但是表格左边的菜单没有粘住（因为它不是表格的一部分。）
为了我的目的，我知道需要“粘性”的div总是从窗口顶部下方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"放进去了：
.stopMenu {
.transition: all 0.1s;
}
在https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/有一个很棒的jQuery教程。
它复制Apple.com购物车类型的侧边栏滚动。可能为您提供良好服务的Google查询是“固定浮动侧边栏”。
根据我的拙见，解决方案可归结为此：
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答案的编辑历史，如果你对我“归结”的东西感兴趣的话。）
这对我来说就像一个魅力。
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/
这是我的最终代码....（基于以前的修复，感谢大家为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);
});
});
这是我的解决方案（希望它也足够插件）：
- 复制JS代码部分
- 将“slide-along-scroll”类添加到您想要的元素中
- 在JS代码中进行像素完美校正
- 希望你会喜欢它！
// 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));
});
});/* 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;
}<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 a以上是关于如何让div跟随jQuery顺利滚动？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery 到达 div 顶部但不滚动？ [复制]