[英]Prevent scrolling of parent element when inner element scroll position reaches top/bottom?
[英]Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element
我使用下面的jQuery(由James Montagne回答)在用戶向下滾動250px后開始固定位置滾動,以便元素保持固定在瀏覽器的頂部。
$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,250-$(this).scrollTop()));
});
問題:另外,當滾動固定位置元素的底部到達父div元素的末尾時,我想停止固定位置滾動。 這樣可以防止固定位置元素溢出父元素並獲得截止。
我的示例代碼在這里: 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>
截圖:
(對這個原始問題和答案的附加問題: 在某一點停止固定位置滾動? )
為了防止固定元素溢出父元素,我提出了這個解決方案。 示例代碼
$(window).scroll(function(){
var scroll_top = $(this).scrollTop(); // get scroll position top
var height_element_parent = $("#theFixed").parent().outerHeight(); //get high parent element
var height_element = $("#theFixed").height(); //get high of elemeneto
var position_fixed_max = height_element_parent - height_element; // get the maximum position of the elemen
var position_fixed = scroll_top < 250 ? 250 - scroll_top : position_fixed_max > scroll_top ? 0 : position_fixed_max - scroll_top;
$("#theFixed").css("top",position_fixed);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.