JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<ul class="demoNav scrollTopWindow">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#service">Service</a></li>
    <li><a href="#contact">Contact Us</a></li>
</ul>

<div id="home" class="contentSection">
    <h2>Home Div Section here</h2>
    <p>Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br /></p>
</div>

<div id="about" class="contentSection">
    <h2>About Us Div Section here</h2>
    <p>Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br /></p>
</div>

<div id="service" class="contentSection">
    <h2>Service Div Section here</h2>
    <p>Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br />Demo text Demo Text <br /></p>
</div>

<div id="contact" class="contentSection">
    <h2>Contact Div Section here</h2>
   ...

CSS

*{margin:0;padding:0;font-family:verdana;font-size:12px;}
.demoNav{overflow:hidden;background:red;padding:10px; margin-top:100px;}
.demoNav, .demoNav li{list-style-type:none;}
.demoNav li{
    float:left;
}
.demoNav li a{
    display:block;
    padding:2px 5px;background:#ccc;
    text-decoration:none;
    font-size:14px;
    font-weight:400px;
}
.demoNav li+ li{
    margin-left:5px;
}
.contentSection{
    margin:60px 5px 10px 5px;
    padding:5px 10px;
    border:solid 1px #ccc;
}
.contentSection h2{
    font-size:16px;
    text-decoration:underline;
}

JavaScript

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
            'scrollTop': $target.offset().top
	    }, 500, 'swing', function () {
	        window.location.hash = target;
	    });
	});
    
    
    var oritop = -100;
   $(window).scroll(function() {
    var scrollt = $(this).scrollTop();
    var elm = $(".scrollTopWindow");
    if(oritop < 0) {
        oritop= elm.offset().top;
    }
    if(scrollt >= oritop) {
        elm.css({"position": "fixed", "top": '50px', "left": 0, "right":0, "margin-top":'0'});
    }
    else {
        elm.css({"position":"static", "margin-top":"100px"});
    }


});
    
});