JSFiddle - React, Tailwind, and code Playground

by masza

HTML

<body>
    <div id="one"><a href="#four">FOUR</a></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"><a href="#one">ONE</a></div>
</body>

CSS

body, html{
    height:200%;
}
    
#one, #two, #three, #four
{
    padding: 0px;
    margin: 0px;
    width: 100%; 
    height:100%;
    position:absolute;
}


#one {
    background-color: aqua;
    top:0px;
}
#two {
    background-color: red;
    top:100%;
}
#three {
    background-color: #0a0;
    top:200%;
}
#four {
    background-color: #a05;
    top:300%;
}

JavaScript

(function(window){
$.fn.stopAtTop= function () {
    var $this = this,
        $window = $(window),
        thisPos = $this.offset().top,
        //thisPreservedTop = $this.css("top"),
        setPosition,
        under,
        over;

    under = function(){
        if ($window.scrollTop() < thisPos) {
            $this.css({
                position: 'absolute',
                top: ""
            });
            setPosition = over;
        }
    };
    
    over = function(){
        if (!($window.scrollTop() < thisPos)){
            $this.css({
                position: 'fixed',
                top: 0
            });
            setPosition = under;
        }
    };
    
    setPosition = over;
    
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    
    $window.scroll(function(){setPosition();});
    setPosition();
};
})(window);

$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();