blocks|key|1813942|text|在https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/上有一个很棒的关于这方面的jQuery教程。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1813943|它复制了侧边栏滚动的Apple.com购物车类型。Google查询可能对你有很好的帮助，那就是“固定浮动侧边栏”。|1813944|entityMap|0|LINK|mutability|MUTABLE|url|https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/^0|1|2P|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

There's a fantastic jQuery tutorial for this at <a href="https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/" rel="nofollow noreferrer">https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/</a>.

It replicates the Apple.com shopping cart type of sidebar scrolling. The Google query that might have served you well is "fixed floating sidebar".

blocks|key|1814052|text|那段代码不能很好地工作，我稍微修改了一下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1814053|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%2B10},500);
+++++}
+});|code-block|syntax|javascript|1814054|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

That code doesn't work very well
i fixed it a little bit

<pre><code>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&lt;elpos_original) {
 finaldestination = elpos_original;
 el.stop().animate({'top':400},500);
 } else {
 el.stop().animate({'top':windowpos+10},500);
 }
 });
</code></pre>

blocks|key|2027508|text|解决方案可以归结为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2027509|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);}
});|code-block|syntax|javascript|2027510|我更改了el的赋值，因为按类查找单个元素不是一个很好的习惯；如果只想要一个元素按id查找，如果想迭代元素集合，就按类查找它们。|offset|length|style|CODE|2027511|请注意-我的答案指的是当时被接受的答案(目前它仍然是被接受的答案，但后来被编辑了，因此我的答案不再是你在这个页面上@Martti+Lane的答案中看到的内容；我的答案是他最初被接受的答案；如果你对我的“总结”感兴趣，你可以看看@Martti的答案的编辑历史。)|2027512|entityMap^0|0|0|4|2|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The solution can be boiled down to this:

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

I have changed the assignment of <code>el</code> because finding a single element by class is not a great habit to get in to; if you only want one element find it by id, if you want to iterate over a collection of elements then find them by class.

please note - my answer here refers to the accepted answer at that time (it still is the accepted answer at the moment, but has since been edited and therefore my answer no longer "boils down" what you see in @Martti Lane's answer on this page; my answer "boils down" his original, accepted, answer; you can take a look at the edit history of @Martti's answer if you're interested in what I "boiled down".)

blocks|key|1814145|text|我需要div在到达某个对象时停止，所以我这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1814146|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+%7C%7C+windowpos>=stophere)+{
++++++++++++finaldestination+=+elpos_original;
++++++++++++el.stop().animate({'top':10});
++++++++}+else+{
++++++++++++el.stop().animate({'top':finaldestination-elpos_original%2B10},500);
++++++++}
++++});|code-block|syntax|javascript|1814147|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I needed the div to stop when it reach a certain object, so i did it like this:

<pre><code>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&lt;elpos_original || windowpos&gt;=stophere) {
 finaldestination = elpos_original;
 el.stop().animate({'top':10});
 } else {
 el.stop().animate({'top':finaldestination-elpos_original+10},500);
 }
 });
</code></pre>

blocks|key|1814149|text|这是我的最终代码...(基于之前的修复，感谢您花大量时间进行headstart，节省了大量的实验时间)。让我头疼的是向上滚动和向下滚动...+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1814150|它总是让我想知道jquery是如何优雅的！|1814151|$(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%2Boriginalelpos;
++++++++el.stop().animate({'top':finaldestination},500);
+++++});

});|code-block|syntax|javascript|1814152|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is my final code .... (based on previous fixes, thank you big time for headstart, saved a lot of time experimenting). What bugged me was scrolling up, as well as scrolling down ... :)

it always makes me wonder how jquery can be elegant!!!

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

});
</code></pre>

blocks|key|2027548|text|这个在facebook上也是一样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2027549|<script>
var+valX+=+$(window).scrollTop();
function+syncScroll(target){
	var+valY+=+$(window).scrollTop();
	var+difYX+=+valY+-+valX;
	var+targetX+=+$(target).scrollTop();
	if(valY+>+valX){
		$(target).scrollTop(difYX);
	}
	if(difYX+<=+0){
		$(target).scrollTop(-20);
	}
}

$(window).scroll(function(){
	syncScroll('#demo');
})
</script>|code-block|syntax|javascript|2027550|body{
++margin:0;
++padding:0;
++height:100%25;
}
#demo{
++position:fixed;
++height:100vh;
++overflow:hidden;
++width:40%25;
}
#content{
++position:relative;
++float:right;
++width:60%25;
++color:red;+
}|2027551|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
++<div+id="demo">
++++<ul>
++++++<li>
++++++++"Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum."
++++++</li>
++++++<li>
++++++++
"Sed+ut+perspiciatis+unde+omnis+iste+natus+error+sit+voluptatem+accusantium+doloremque+laudantium,+totam+rem+aperiam,+eaque+ipsa+quae+ab+illo+inventore+veritatis+et+quasi+architecto+beatae+vitae+dicta+sunt+explicabo.+Nemo+enim+ipsam+voluptatem+quia+voluptas+sit+aspernatur+aut+odit+aut+fugit,+sed+quia+consequuntur+magni+dolores+eos+qui+ratione+voluptatem+sequi+nesciunt.+Neque+porro+quisquam+est,+qui+dolorem+ipsum+quia+dolor+sit+amet,+consectetur,+adipisci+velit,+sed+quia+non+numquam+eius+modi+tempora+incidunt+ut+labore+et+dolore+magnam+aliquam+quaerat+voluptatem.+Ut+enim+ad+minima+veniam,+quis+nostrum+exercitationem+ullam+corporis+suscipit+laboriosam,+nisi+ut+aliquid+ex+ea+commodi+consequatur?+Quis+autem+vel+eum+iure+reprehenderit+qui+in+ea+voluptate+velit+esse+quam+nihil+molestiae+consequatur,+vel+illum+qui+dolorem+eum+fugiat+quo+voluptas+nulla+pariatur?"
++++++++
++++++</li>++
++++++<li>
++++++++
"But+I+must+explain+to+you+how+all+this+mistaken+idea+of+denouncing+pleasure+and+praising+pain+was+born+and+I+will+give+you+a+complete+account+of+the+system,+and+expound+the+actual+teachings+of+the+great+explorer+of+the+truth,+the+master-builder+of+human+happiness.+No+one+rejects,+dislikes,+or+avoids+pleasure+itself,+because+it+is+pleasure,+but+because+those+who+do+not+know+how+to+pursue+pleasure+rationally+encounter+consequences+that+are+extremely+painful.+Nor+again+is+there+anyone+who+loves+or+pursues+or+desires+to+obtain+pain+of+itself,+because+it+is+pain,+but+because+occasionally+circumstances+occur+in+which+toil+and+pain+can+procure+him+some+great+pleasure.+To+take+a+trivial+example,+which+of+us+ever+undertakes+laborious+physical+exercise,+except+to+obtain+some+advantage+from+it?+But+who+has+any+right+to+find+fault+with+a+man+who+chooses+to+enjoy+a+pleasure+that+has+no+annoying+consequences,+or+one+who+avoids+a+pain+that+produces+no+resultant+pleasure?"
++++++++
++++++</li>
++++<ul>
++</div>
++<div+id="content">
++++<ul>
++++++<li>
++++++++"Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum."
++++++</li>
++++++<li>
++++++++
"Sed+ut+perspiciatis+unde+omnis+iste+natus+error+sit+voluptatem+accusantium+doloremque+laudantium,+totam+rem+aperiam,+eaque+ipsa+quae+ab+illo+inventore+veritatis+et+quasi+architecto+beatae+vitae+dicta+sunt+explicabo.+Nemo+enim+ipsam+voluptatem+quia+voluptas+sit+aspernatur+aut+odit+aut+fugit,+sed+quia+consequuntur+magni+dolores+eos+qui+ratione+voluptatem+sequi+nesciunt.+Neque+porro+quisquam+est,+qui+dolorem+ipsum+quia+dolor+sit+amet,+consectetur,+adipisci+velit,+sed+quia+non+numquam+eius+modi+tempora+incidunt+ut+labore+et+dolore+magnam+aliquam+quaerat+voluptatem.+Ut+enim+ad+minima+veniam,+quis+nostrum+exercitationem+ullam+corporis+suscipit+laboriosam,+nisi+ut+aliquid+ex+ea+commodi+consequatur?+Quis+autem+vel+eum+iure+reprehenderit+qui+in+ea+voluptate+velit+esse+quam+nihil+molestiae+consequatur,+vel+illum+qui+dolorem+eum+fugiat+quo+voluptas+nulla+pariatur?"
++++++++
++++++</li>++
++++++<li>
++++++++
"But+I+must+explain+to+you+how+all+this+mistaken+idea+of+denouncing+pleasure+and+praising+pain+was+born+and+I+will+give+you+a+complete+account+of+the+system,+and+expound+the+actual+teachings+of+the+great+explorer+of+the+truth,+the+master-builder+of+human+happiness.+No+one+rejects,+dislikes,+or+avoids+pleasure+itself,+because+it+is+pleasure,+but+because+those+who+do+not+know+how+to+pursue+pleasure+rationally+encounter+consequences+that+are+extremely+painful.+Nor+again+is+there+anyone+who+loves+or+pursues+or+desires+to+obtain+pain+of+itself,+because+it+is+pain,+but+because+occasionally+circumstances+occur+in+which+toil+and+pain+can+procure+him+some+great+pleasure.+To+take+a+trivial+example,+which+of+us+ever+undertakes+laborious+physical+exercise,+except+to+obtain+some+advantage+from+it?+But+who+has+any+right+to+find+fault+with+a+man+who+chooses+to+enjoy+a+pleasure+that+has+no+annoying+consequences,+or+one+who+avoids+a+pain+that+produces+no+resultant+pleasure?"
++++++++
++++++</li>
++++++<li>
++++++++"Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum."
++++++</li>
++++++<li>
++++++++
"Sed+ut+perspiciatis+unde+omnis+iste+natus+error+sit+voluptatem+accusantium+doloremque+laudantium,+totam+rem+aperiam,+eaque+ipsa+quae+ab+illo+inventore+veritatis+et+quasi+architecto+beatae+vitae+dicta+sunt+explicabo.+Nemo+enim+ipsam+voluptatem+quia+voluptas+sit+aspernatur+aut+odit+aut+fugit,+sed+quia+consequuntur+magni+dolores+eos+qui+ratione+voluptatem+sequi+nesciunt.+Neque+porro+quisquam+est,+qui+dolorem+ipsum+quia+dolor+sit+amet,+consectetur,+adipisci+velit,+sed+quia+non+numquam+eius+modi+tempora+incidunt+ut+labore+et+dolore+magnam+aliquam+quaerat+voluptatem.+Ut+enim+ad+minima+veniam,+quis+nostrum+exercitationem+ullam+corporis+suscipit+laboriosam,+nisi+ut+aliquid+ex+ea+commodi+consequatur?+Quis+autem+vel+eum+iure+reprehenderit+qui+in+ea+voluptate+velit+esse+quam+nihil+molestiae+consequatur,+vel+illum+qui+dolorem+eum+fugiat+quo+voluptas+nulla+pariatur?"
++++++++
++++++</li>++
++++++<li>
++++++++
"But+I+must+explain+to+you+how+all+this+mistaken+idea+of+denouncing+pleasure+and+praising+pain+was+born+and+I+will+give+you+a+complete+account+of+the+system,+and+expound+the+actual+teachings+of+the+great+explorer+of+the+truth,+the+master-builder+of+human+happiness.+No+one+rejects,+dislikes,+or+avoids+pleasure+itself,+because+it+is+pleasure,+but+because+those+who+do+not+know+how+to+pursue+pleasure+rationally+encounter+consequences+that+are+extremely+painful.+Nor+again+is+there+anyone+who+loves+or+pursues+or+desires+to+obtain+pain+of+itself,+because+it+is+pain,+but+because+occasionally+circumstances+occur+in+which+toil+and+pain+can+procure+him+some+great+pleasure.+To+take+a+trivial+example,+which+of+us+ever+undertakes+laborious+physical+exercise,+except+to+obtain+some+advantage+from+it?+But+who+has+any+right+to+find+fault+with+a+man+who+chooses+to+enjoy+a+pleasure+that+has+no+annoying+consequences,+or+one+who+avoids+a+pain+that+produces+no+resultant+pleasure?"
++++++++
++++++</li>
++++++<li>
++++++++"Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum."
++++++</li>
++++++<li>
++++++++
"Sed+ut+perspiciatis+unde+omnis+iste+natus+error+sit+voluptatem+accusantium+doloremque+laudantium,+totam+rem+aperiam,+eaque+ipsa+quae+ab+illo+inventore+veritatis+et+quasi+architecto+beatae+vitae+dicta+sunt+explicabo.+Nemo+enim+ipsam+voluptatem+quia+voluptas+sit+aspernatur+aut+odit+aut+fugit,+sed+quia+consequuntur+magni+dolores+eos+qui+ratione+voluptatem+sequi+nesciunt.+Neque+porro+quisquam+est,+qui+dolorem+ipsum+quia+dolor+sit+amet,+consectetur,+adipisci+velit,+sed+quia+non+numquam+eius+modi+tempora+incidunt+ut+labore+et+dolore+magnam+aliquam+quaerat+voluptatem.+Ut+enim+ad+minima+veniam,+quis+nostrum+exercitationem+ullam+corporis+suscipit+laboriosam,+nisi+ut+aliquid+ex+ea+commodi+consequatur?+Quis+autem+vel+eum+iure+reprehenderit+qui+in+ea+voluptate+velit+esse+quam+nihil+molestiae+consequatur,+vel+illum+qui+dolorem+eum+fugiat+quo+voluptas+nulla+pariatur?"
++++++++
++++++</li>++
++++++<li>
++++++++
"But+I+must+explain+to+you+how+all+this+mistaken+idea+of+denouncing+pleasure+and+praising+pain+was+born+and+I+will+give+you+a+complete+account+of+the+system,+and+expound+the+actual+teachings+of+the+great+explorer+of+the+truth,+the+master-builder+of+human+happiness.+No+one+rejects,+dislikes,+or+avoids+pleasure+itself,+because+it+is+pleasure,+but+because+those+who+do+not+know+how+to+pursue+pleasure+rationally+encounter+consequences+that+are+extremely+painful.+Nor+again+is+there+anyone+who+loves+or+pursues+or+desires+to+obtain+pain+of+itself,+because+it+is+pain,+but+because+occasionally+circumstances+occur+in+which+toil+and+pain+can+procure+him+some+great+pleasure.+To+take+a+trivial+example,+which+of+us+ever+undertakes+laborious+physical+exercise,+except+to+obtain+some+advantage+from+it?+But+who+has+any+right+to+find+fault+with+a+man+who+chooses+to+enjoy+a+pleasure+that+has+no+annoying+consequences,+or+one+who+avoids+a+pain+that+produces+no+resultant+pleasure?"
++++++++
++++++</li>
++++++<li>
++++++++"Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum."
++++++</li>
++++++<li>
++++++++
"Sed+ut+perspiciatis+unde+omnis+iste+natus+error+sit+voluptatem+accusantium+doloremque+laudantium,+totam+rem+aperiam,+eaque+ipsa+quae+ab+illo+inventore+veritatis+et+quasi+architecto+beatae+vitae+dicta+sunt+explicabo.+Nemo+enim+ipsam+voluptatem+quia+voluptas+sit+aspernatur+aut+odit+aut+fugit,+sed+quia+consequuntur+magni+dolores+eos+qui+ratione+voluptatem+sequi+nesciunt.+Neque+porro+quisquam+est,+qui+dolorem+ipsum+quia+dolor+sit+amet,+consectetur,+adipisci+velit,+sed+quia+non+numquam+eius+modi+tempora+incidunt+ut+labore+et+dolore+magnam+aliquam+quaerat+voluptatem.+Ut+enim+ad+minima+veniam,+quis+nostrum+exercitationem+ullam+corporis+suscipit+laboriosam,+nisi+ut+aliquid+ex+ea+commodi+consequatur?+Quis+autem+vel+eum+iure+reprehenderit+qui+in+ea+voluptate+velit+esse+quam+nihil+molestiae+consequatur,+vel+illum+qui+dolorem+eum+fugiat+quo+voluptas+nulla+pariatur?"
++++++++
++++++</li>++
++++++<li>
++++++++
"But+I+must+explain+to+you+how+all+this+mistaken+idea+of+denouncing+pleasure+and+praising+pain+was+born+and+I+will+give+you+a+complete+account+of+the+system,+and+expound+the+actual+teachings+of+the+great+explorer+of+the+truth,+the+master-builder+of+human+happiness.+No+one+rejects,+dislikes,+or+avoids+pleasure+itself,+because+it+is+pleasure,+but+because+those+who+do+not+know+how+to+pursue+pleasure+rationally+encounter+consequences+that+are+extremely+painful.+Nor+again+is+there+anyone+who+loves+or+pursues+or+desires+to+obtain+pain+of+itself,+because+it+is+pain,+but+because+occasionally+circumstances+occur+in+which+toil+and+pain+can+procure+him+some+great+pleasure.+To+take+a+trivial+example,+which+of+us+ever+undertakes+laborious+physical+exercise,+except+to+obtain+some+advantage+from+it?+But+who+has+any+right+to+find+fault+with+a+man+who+chooses+to+enjoy+a+pleasure+that+has+no+annoying+consequences,+or+one+who+avoids+a+pain+that+produces+no+resultant+pleasure?"
++++++++
++++++</li>
++++<ul>
+++</div>+++
</body|2027552|​|2027553|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This one is same on facebook:
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
var valX = $(window).scrollTop();
function syncScroll(target){
	var valY = $(window).scrollTop();
	var difYX = valY - valX;
	var targetX = $(target).scrollTop();
	if(valY &gt; valX){
		$(target).scrollTop(difYX);
	}
	if(difYX &lt;= 0){
		$(target).scrollTop(-20);
	}
}

$(window).scroll(function(){
	syncScroll('#demo');
})
&lt;/script&gt;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
 margin:0;
 padding:0;
 height:100%;
}
#demo{
 position:fixed;
 height:100vh;
 overflow:hidden;
 width:40%;
}
#content{
 position:relative;
 float:right;
 width:60%;
 color:red; 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
 &lt;div id="demo"&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 &lt;/p&gt;
 &lt;/li&gt; 
 &lt;li&gt;
 &lt;p&gt;
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
 &lt;/p&gt;
 &lt;/li&gt;
 &lt;ul&gt;
 &lt;/div&gt;
 &lt;div id="content"&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 &lt;/p&gt;
 &lt;/li&gt; 
 &lt;li&gt;
 &lt;p&gt;
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
 &lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 &lt;/p&gt;
 &lt;/li&gt; 
 &lt;li&gt;
 &lt;p&gt;
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
 &lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 &lt;/p&gt;
 &lt;/li&gt; 
 &lt;li&gt;
 &lt;p&gt;
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
 &lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 &lt;/p&gt;
 &lt;/li&gt; 
 &lt;li&gt;
 &lt;p&gt;
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
 &lt;/p&gt;
 &lt;/li&gt;
 &lt;ul&gt;
 &lt;/div&gt; 
&lt;/body</code></pre>
</div>
</div>

blocks|key|1814473|text|为此，我写了一个相对简单的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1814474|我有一个表格，它使用了一个“粘性表格标题”插件将其粘贴到页面上特定div的正下方，但是表格左侧的菜单没有固定下来(因为它不是表格的一部分)。|1814475|出于我的目的，我知道需要“粘性”的div总是从窗口顶部以下的385像素开始，所以我在窗口顶部上方创建了一个空的div：|1814476|<div+id="stopMenu"+class="stopMenu"></div>|code-block|syntax|javascript|1814477|然后运行以下命令：|1814478|$(window).scroll(function(){+++
+++if+(+$(window).scrollTop()+>+385+)+{
++++extraPadding+=+$(window).scrollTop()+-+385;
++++$('#stopMenu').css(+"padding-top",+extraPadding+);
+++}+else+{
+++++$('#stopMenu').css(+"padding-top",+"0"+);
+++}
});|1814479|当用户滚动时，它会将$(window).scrollTop()的值添加到整数385中，然后将该值添加到我希望保持焦点的stopMenu+div的上面。|offset|length|style|CODE|1814480|在用户一直向上滚动的情况下，我只是将额外的填充设置为0。|1814481|这不需要用户在CSS中做任何特别的事情，但是做一个小延迟是一种很好的效果，所以我也放入了class="stopMenu"：|1814482|.stopMenu+{
++.transition:+all+0.1s;
}|1814483|entityMap^0|0|0|0|0|0|0|A|L|12|3|1N|8|0|0|18|G|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|18|8|@$Q|19|R|1A|S|T]|$Q|1B|R|1C|S|T]|$Q|1D|R|1E|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@$Q|1H|R|1I|S|T]]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1J|8|@]|9|@]|A|$I|J]]|$1|10|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|11|$]]

I wrote a relatively simple answer for this.

I have a table that's using one of the "sticky table header" plugins to stick right below a particular div on my page, but the menu to the left of the table didn't stick (as it's not part of the table.)

For my purposes, I knew the div that needed "stickiness" was always going to start at 385 pixels below the top of the window, so I created an empty div right above that:

<pre><code>&lt;div id="stopMenu" class="stopMenu"&gt;&lt;/div&gt;
</code></pre>

Then ran this:

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

As the user scrolls, it adds whatever the value of <code>$(window).scrollTop()</code> is to the integer <code>385</code>, then adds that value to the <code>stopMenu</code> div that's above the thing I want to stay focused.

In the event the user scrolls all the way back up, I just set the extra padding to 0.

This doesn't require the user to do anything IN CSS particularly, but it's kind of a nice effect to make a small delay, so I put the <code>class="stopMenu"</code> in as well:

<pre><code>.stopMenu {
 .transition: all 0.1s;
}
</code></pre>

In my container there are sections/boxes, but the last one of these boxes should follow scrolling when none of the other boxes are visible.

So, when user scrolls down, he sees a normal sidebar, but when user has went down enough, sidebar ends but the last box starts to follow on the top of the screen. I have seen this a lot on different kind of sites.

My code at the moment:

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

How to make div follow scrolling smoothly with jQuery?

容器

jQuery

在我的容器中有部分/框，但是当其他框都看不到时，最后一个框应该跟随滚动。因此，当用户向下滚动时，他会看到一个正常的侧边栏，但当用户向下滚动足够多时，侧边栏将结束，但屏幕顶部的最后一个框开始跟随。我在不同类型的网站上看到过很多这样的东西。我目前的代码：$(window).scroll(function(){    $.e...

问如何用jQuery让div跟随滚动顺畅？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用jQuery让div跟随滚动顺畅？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用jQuery让div跟随滚动顺畅？
EN