JSFiddle - React, Tailwind, and code Playground

by collabcoders

HTML

<div class="container">
    <div id="tophead" class="tophead">
      Sliding Down Container
    </div>
  <div id="header" class="header">
    Hello World
  </div>
</div>

CSS

.tophead {  
width:100%;
height: 100px;
    color:#fff;
background-image: -webkit-gradient(linear, left top, left bottom, from( #111 /*{a-bar-background-start}*/), to( #fff/*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #111 /*{a-bar-background-start}*/, #fff /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #111 /*{a-bar-background-start}*/, #fff /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #111 /*{a-bar-background-start}*/, #fff /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #111 /*{a-bar-background-start}*/, #fff /*{a-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #111 /*{a-bar-background-start}*/, #fff /*{a-bar-background-end}*/);
}

.container {
     height:2000px;
    width:100%;
    margin-top:-100px
        }

.header{
    text-align:center;
    background-color:#000;
    height:100px;
    position:relative;
    min-height:100px;
    width:100%;
    top:500px;
    color: #fff;
}

JavaScript

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>500){
         $('#header').css({ 'position': 'fixed', 'top' : '0' });
    } else {
         $('#header').css({ 'position': 'relative', 'top': '500px'});
    }
});

$(document).ready(function () {
    $(".container").animate({
         marginTop: "0"
    },2000);
});