Bootstrap > Affix

Animated navbar on affix in Bootstrap

How to animate a navbar using affix using Bootstrap?


Animating a navbar using affix 

We can animate a navbar using affix by using css style in the affix

  <style>
        .affix {
            top: 0;
            width: 100%;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            border: 2px solid black;
            background-color: orange;
        }

            .affix a {
                color: black !important;
                padding: 10px;
                -webkit-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
            }

        .affix-top a {
            padding: 25px !important;
        }

        .affix + .container-fluid {
            padding-top: 200px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="color:white;background-color:green;height:200px;">
        <h2>SN ITFunda</h2>
        <p> SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies </p>
    </div>
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200">
        <ul class="nav navbar-nav">
            <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="color:black;background-color:pink; height:800px;">
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
    </div>
</body>
  • In the above code snippet we have defined how to animate a navbar using affix
  • In the first step of the body element we have div section with class value container-fluid with given style to define the value
  • After creating div section we have taken nav element to define the navbar with class value as navbar navbar-inverse and data-spy as affix , data-offset-top value as 200.
  • In the next line we have the <ul> element with class value as nav navbar-nav to define the list value 
  • After creating navbar we have taken another div with class value container-fluid with style 
  • In the next line of HTML we have style sheet to define the affix when the screen is scrolled it gets minimized by appearing in given color and background-color

output

 Views: 686 | Post Order: 64



Write for us