当滚动元素的底部到达父元素的结尾时停止jQuery固定位置滚动 [英] Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element

问题描述

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

  $（window）.scroll（function（）{
 $（＃theFixed）css（top，Math.max（0,250- $ （this）.scrollTop（）））; 
}）; 
  

问题：此外，我想停止固定位置滚动时滚动的底部固定位置元素到达父div元素的末尾。

我的示例代码在这里：）

解决方案

为了防止固定元素溢出父元素，我提出这个解决方案。
示例代码

  $（window）.scroll（function（）{
 var scroll_top = $（this）.scrollTop（）; //获取滚动位置top 
 var height_element_parent = $ #theFixed）。parent（）。outerHeight（）; //获得高父元素
 var height_element = $（＃theFixed）height（）; //获取elemeneto的高度
 var position_fixed_max = height_element_parent-height_element; //获取元素的最大位置
 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）; 
}）; 
  

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?)

解决方案

To prevent the fixed element from overflowing the parent element, I present this solution. 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);
});

这篇关于当滚动元素的底部到达父元素的结尾时停止jQuery固定位置滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！