Affix navbar in Bootstrap

How to affix navbar using jQuery in Bootstrap

Affix navbar

We can affix the navbar, When the user scrolls the navbar the header function goes to top and header section fires when the navbar list values are clicked.

<style>
        .affix {
            top: 0;
            width: 100%;
        }
            .affix + .container-fluid {
                padding-top: 70px;
            }
    </style>
</head>
<body>
    <header class="container-fluid" style="background-color:red;color:white;height:200px;">
        <h1>Bootstrap Affix Example</h1>
        <p>SN ITFunda is a online tutorial which consists of websites to make people learn web technologies with the websites dotnetfunda, techfunda, itfunda, farmingfunda, funddo video etc </p>
    </header>
    <nav class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">SN ITFunda</a></li>
            <li><a href="#">DotNetFunda</a></li>
            <li><a href="#">TechFunda</a></li>
            <li><a href="#">ITFunda</a></li>
        </ul>
    </nav>
    <div class="container-fluid" style="height:900px;background-color:pink;color:black;">
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
        <h1>SN ITFunda</h1>
    </div>
    <script>
        $(document).ready(function () {          
            $(".navbar").affix({ offset: { top: $("header").outerHeight(true) } });
        });
    </script>
</body>

In the above code snippet we have defined the jQuery function to call the header section when the event is clicked in the navbar
In the first step of the body element we have header section with class value container-fluid to define the values by giving style as color, background-color and height
In the next line we have nav element to define the navbar using class value navbar navbar-inverse and we have <ul> element with class value nav navbar-nav to define the list values as DotNetFunda, TechFunda, ITFunda
In the next line we have the Div section with class value as container-fluid with style as background-color, color, height and we have defined the values in heading tag<h1>
In the next line we have script function to define the navbar we have $(".navbar") which calls the nav element, .affix({offset:{top:("header").outerheight(true) } }); defines as navbar element to affix the header section , i.e when the user scrolls the element andthen the header section values moves upwardsand displays the navbar and then the navbar list values are clicked then the Header section values are displayed.
In the next line we have style sheet to define the affix as top:0 defines the navbar to top and width as 100% defines the navbar width as to fit the screen of 100% and .affix+container-fluid as padding-top:70px defines as when the scroll function is done then list values in the container-fluid with heading tag <h1> appear at below of the navbar with 70px.

output

Views: 5613 | Post Order: 64

Bootstrap > Affix

Affix navbar in Bootstrap

How to affix navbar using jQuery in Bootstrap

Affix navbar

Related Posts

Utility Tools