JSFiddle - React, Tailwind, and code Playground

by evermoretech

HTML

<div class="body">
    <div class="header">Header Here</div>
    <div class="content">Content here</div>
    <div class="side-nav">
        <ul>
            <li>Menu item 1</li>
            <li>Menu item 2</li>
        </ul>
    </div>
</div>

CSS

.body { 
    width:100%; 
}

.header { 
    text-align:center; height:200px; 
}

.side-nav {
    position:fixed;
    right:10px;
    top:200px;    
}

.content {
    height:1000px; 
    background:yellow;
}

JavaScript

(function($) {
	$(document).ready( function() {
		if ($(this).scrollTop() < 200) { 
            $(".side-nav").css({ "position": "fixed", "top": 200 - $(this).scrollTop() + "px" });
        } else {
            $(".side-nav").css({ "position": "fixed", "top": "0px" }); 
        }   

		
		$(window).scroll(function() {
			if ($(this).scrollTop() < 200) { 
				$(".side-nav").css({ "position": "fixed", "top": 200 - $(this).scrollTop() + "px" });
			} else {
				$(".side-nav").css({ "position": "fixed", "top": "0px" }); 
			}  		
		});
		
		
		
	});
})(jQuery);