当滚动元素的底部到达父元素的末尾时，停止 jQuery 固定位置滚动答案

【问题标题】：Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element当滚动元素的底部到达父元素的末尾时，停止 jQuery 固定位置滚动
【发布时间】：2014-03-07 21:55:45
【问题描述】：

我正在使用下面的 jQuery（由 James Montagne 回答）在用户向下滚动 250 像素后开始固定位置滚动，以便元素保持固定在浏览器的顶部。

$(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>

截图：

（这个原始问答的附加问题：Stopping fixed position scrolling at a certain point?）

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

为了防止固定元素溢出父元素，我提出了这个解决方案。 Example code

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

【讨论】：

谢谢 - 正是我需要的！