Navbar animation on scroll using Jquery

0
13
views
Featured image of Navbar animation on scroll

Learn how to perform Navbar animation on scroll

In this tutorial we will learn how to perform Navbar Animation on Scroll. To create this we’ll use HTML, CSS and Most popular JavaScript library Jquery.

#Demo of Navbar Animation on Scroll


#Source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>On scroll navbar</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 60px 0 0 0;
            font-family: sans-serif;
        }

        .container {
            position: fixed;
            text-align: center;
            height: 60px;
            line-height: 50px;
            font-size: 20px;
            color: #FFF;
            letter-spacing: 6px;
            top: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            transition: .3s;
            background: #333;
        }

        .hide {
            -webit-transform: translateY(-100%);
            -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            -os-transform: translateY(-100%);
            transform: translateY(-100%);
        }
    </style>
</head>

<body>

    <div class="container">
        NAVBAR
    </div>
    <section style="height:5000px;">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            var position = 0, scrollValue;
            $(window).on('scroll', function() {
                scrollValue = $(window).scrollTop();
                if (scrollValue > 50) {
                    $('.container').toggleClass('hide', scrollValue > position);
                    position = scrollValue;
                }

            });

        });
    </script>
</body>

</html>

#Demo of another Navbar


#Source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Navigationbar</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;

        }

        .logo {
            text-align: center;
            height: 100px;

        }

        .logo h1 {
            margin: 0;
            line-height: 100px;
            font-size: 48px;
            color: #222;

        }

        section {
            min-height: 900px;
            width: 100%;
            display: block;
        }

        .menu {
            background-color: #262626;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #FFF;
            letter-spacing: 6px;
            font-weight: bold;

        }

        .sticky {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="logo">
        <h1>Logo</h1>
    </div>
    <div class="menu">
        NAV ITEMS
    </div>
    <section>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </section>
    <script>
        $(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() > 100) {
                    $('.menu').addClass('sticky');
                } else {
                    $('.menu').removeClass('sticky');
                }
            });
        });
    </script>
</body>

</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here