How to Make Sticky Header or Top Navigation Bar

How-to-Make-Sticky-Header-or-Top-Navigation-Bar

How to Make Sticky Header or Top Navigation Bar

Step 1 :  Make a file filename.html and paste the below code in it .

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Header</title>
    <style>
        
        html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
        
        
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }
        
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>

</head>
<body>
<header><h1>Make Sticky Header</h1></header>
    
<h6>text</h6>
<h6>text</h6>

<h6>text</h6>

<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>
<h6>text</h6>

</body>
</html>

 

Stay Connected For More :)

 

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy