I'm using the below jQuery (answered by James Montagne) to begin fixed position scrolling after the user scrolls down 250px so that the element stays fixed to the top of the browser.
$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,250-$(this).scrollTop()));
});
QUESTION: In addition, I'd like to stop the fixed position scrolling when the bottom of the scrolling fixed position element comes to the end of the parent div element. This way preventing the fixed position element from overflowing the parent element and getting cutoff.
My example code is here: http://jsfiddle.net/b43hj/2020/
<div>
<div id="theFixed" style="position: fixed; top: 250px; background-color: red">
0 SOMETHING<br />
1 SOMETHING<br />
2 SOMETHING<br />
3 SOMETHING<br />
4 SOMETHING<br />
5 SOMETHING<br />
6 SOMETHING<br />
7 SOMETHING<br />
8 SOMETHING<br />
9 SOMETHING<br />
10 SOMETHING<br />
11 SOMETHING<br />
12 SOMETHING<br />
13 SOMETHING<br />
14 SOMETHING<br />
15 SOMETHING<br />
16 SOMETHING<br />
17 SOMETHING<br />
18 SOMETHING<br />
19 SOMETHING<br />
20 SOMETHING<br />
21 SOMETHING<br />
22 SOMETHING<br />
23 SOMETHING<br />
24 SOMETHING<br />
25 SOMETHING<br />
26 SOMETHING<br />
27 SOMETHING<br />
28 SOMETHING<br />
29 SOMETHING<br />
</div>
THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
<br>
THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS
<br>
... END
</div>
Screenshot:
(Add-on question to this original question and answer: Stopping fixed position scrolling at a certain point?)
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…