JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="divOne"></div>
        <div class="divTwo"></div>
        <div class="divThree"></div>

CSS

.divOne{
                height: 800px;
                width: 100%;
                background-color: #000;
            }
            .divTwo{
                height: 50px;
                width: 100%;
                position: fixed;
                bottom: 0;
                background-color: brown;
            }
            .divThree{
                height: 100px;
                width: 100%;
                background-color: pink;
            }

JavaScript

$(document).ready(function(){
    var scrollBottom = $(window).scrollTop() + $(window).height();
        alert(scrollBottom);
    	$(window).on("mousewheel", function() {
        var scrollpos = $(document).scrollTop();
        if(scrollpos > scrollBottom){
        	$(".divTwo").css("position","relative");
        }else{
        	$(".divTwo").css("position","fixed");
        }
        
    });
    });