JSFiddle - React, Tailwind, and code Playground

by ult_combo

HTML

<body>
    <div id="one">FIXED...</div>
    <div id="half">Start scrolling #one (FIXED...) from here..</div>
    <div id="two">...BUT STOPS HERE</div>
</body>

CSS

body, html{
    height:200%;
}
 


#one {
    width:100%;    
    height: 200px;
    background-color: aqua;
    position: fixed;
}
#half {
    margin-top:70px;
    width:100%;
    height:40px;
    background-color:yellow;
    position:absolute;
}


#two {
    width: 100%;    
    height:50px;
    background-color: red;
    margin-top:800px;
    position:absolute;
}

JavaScript

var windw = this;

$.fn.followTo = function (from, bumper) {
    var $this = this,
        $window = $(windw),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos) { 
                $this.css({
                    position: 'absolute',
                    top: $startPos
                });
            } else if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#half', '#two');