How Do I Decorate A Slide Down Bar On Scroll

Slide Down a Navigation Bar on Scroll using HTML, CSS and JavaScript

To create a slide down navigation bar y'all need to utilise HTML, CSS, and JavaScript. HTML will make the construction of the body, CSS will brand it looks good. This kind of sliding navbar looks attractive on a site. By using JavaScript you tin can easily make the navigation bar slideable when the user scrolls down.

Creating Structure: In this section, we volition create a basic website structure for the slide down navbar when the user scrolls downwards the page it volition brandish the outcome.

HTML code to brand the construction:

HTML

                <!DOCTYPE html>              
                <                html                >              
                <                head                >              
                                <                championship                >              
                                Slide Down a Navigation Bar on Scroll              
                                using HTML CSS and JavaScript              
                                </                title                >              
                                <                meta                name                =                "viewport"              
                                content                =                "width=device-width, initial-scale=1"                >              
                </                caput                >              
                <                body                >              
                                <                article                >              
                                <                h1                style                =                "color:light-green;"                >              
                                GeeksforGeeks              
                                </                h1                >              
                                <                b                >              
                                A Information science              
                                Portal for Geeks              
                                </                b                >              
                <                p                >              
                                How many times were you lot frustrated while              
                                looking out for a good collection of              
                                programming/algorithm/interview questions?              
                                What did you expect and what did yous get?              
                                This portal has been created to provide              
                                well written, well idea and well              
                                explained solutions for selected questions.              
                                </                p                >              
                                </                article                >              
                                <                div                id                =                "navlist"                >              
                                <                a                href                =                "#"                >Habitation</                a                >              
                                <                a                href                =                "#"                >Almost U.s.a.</                a                >              
                                <                a                href                =                "#"                >Our Products</                a                >              
                                <                a                href                =                "#"                >Careers</                a                >              
                                <                a                href                =                "#"                >Contact Us</                a                >              
                                </                div                >              
                                <                div                class                =                "scrollable"              
                                style                =                "padding:15px 15px 4500px;"                >              
                                </                div                >              
                </                body                >              
                </                html                >              

Designing Structure: In the previous department, we accept created the construction of the basic website. In this section, we volition pattern the structure for the navigation bar and and so scroll down the effect on the navbar using JavaScript.

CSS code to look good the structure:

CSS

                <manner>              
                                article {              
                                position                :                                fixed                ;              
                                margin-left                :                                10px                ;              
                                }              
                                #navlist {              
                                groundwork-color                :                                #0074D9                ;              
                                position                :                                fixed                ;              
                                left                :                                45%                ;              
                                acme                :                                -60px                ;              
                                width                :                                auto                ;              
                                display                :                                cake                ;              
                                transition:                                peak                0.three                south;              
                                }              
                                #navlist a {              
                                float                :                                left                ;              
                                display                :                                cake                ;              
                                color                :                                #f2f2f2                ;              
                                text-marshal                :                                center                ;              
                                padding                :                                12px                ;              
                                text-decoration                :                                none                ;              
                                font-size                :                                15px                ;              
                                }              
                                #navlist a:hover {              
                                background-color                :                                #ddd                ;              
                                color                :                                black                ;              
                                }              
                </style>              

JavaScript code for the blitheness on the card:

JavaScript

                <script>              
                                window.onscroll =                                part                () {              
                                curl()              
                                };              
                                office                scroll() {              
                                if                (document.torso.scrollTop > xx ||              
                                document.documentElement.scrollTop > 20) {              
                                document.getElementById(                "navlist"                ).style.top =                                "0"                ;              
                                }              
                                else                {              
                                document.getElementById(                "navlist"                ).mode.top              
                                =                                "-60px"                ;              
                                }              
                                }              
                </script>              

Combining the HTML, CSS, and JavaScript lawmaking: This example is the combination of the above sections.

HTML

                <!DOCTYPE html>              
                <                html                >              
                <                caput                >              
                                <                title                >              
                                Slide Downwards a Navigation Bar on Ringlet              
                                using HTML CSS and JavaScript              
                                </                championship                >              
                                <                meta                name                =                "viewport"              
                                content                =                "width=device-width, initial-scale=one"                >              
                                <                fashion                >              
                                /* styling article tag component */              
                                commodity {              
                                position: fixed;              
                                margin-left: 10px;              
                                }              
                                /* styling navlist */              
                                #navlist {              
                                background-color: #0074D9;              
                                position: fixed;              
                                left: 45%;              
                                height: -60px;              
                                width: auto;              
                                display: cake;              
                                transition: top 0.3s;              
                                }              
                                /* styling navlist anchor element */              
                                #navlist a {              
                                float: left;              
                                display: block;              
                                color: #f2f2f2;              
                                text-marshal: eye;              
                                padding: 12px;              
                                text-decoration: none;              
                                font-size: 15px;              
                                }              
                                /* hover outcome of navlist anchor element */              
                                #navlist a:hover {              
                                background-color: #ddd;              
                                color: black;              
                                }              
                                </                manner                >              
                </                head                >              
                <                trunk                >              
                                <                article                >              
                                <                h1                style                =                "colour:green;"                >              
                                GeeksforGeeks              
                                </                h1                >              
                                <                b                >              
                                A Figurer Science              
                                Portal for Geeks              
                                </                b                >              
                <                p                >              
                                How many times were yous frustrated while              
                                looking out for a good collection of              
                                programming/algorithm/interview questions?              
                                What did you await and what did y'all go?              
                                This portal has been created to provide              
                                well written, well thought and well              
                                explained solutions for selected questions.              
                                </                p                >              
                                </                article                >              
                                <                div                id                =                "navlist"                >              
                                <                a                href                =                "#"                >Home</                a                >              
                                <                a                href                =                "#"                >About Us</                a                >              
                                <                a                href                =                "#"                >Our Products</                a                >              
                                <                a                href                =                "#"                >Careers</                a                >              
                                <                a                href                =                "#"                >Contact U.s.a.</                a                >              
                                </                div                >              
                                <                div                class                =                "scrollable"              
                                style                =                "padding:15px 15px 4500px;"                >              
                                </                div                >              
                                <                script                >              
                                // When the user scrolls down then              
                                // slide down the navbar              
                                window.onscroll = part() {              
                                coil()              
                                };              
                                function curl() {              
                                if (document.trunk.scrollTop > xx ||              
                                document.documentElement.scrollTop > 20)              
                                {              
                                certificate.getElementById("navlist").mode.pinnacle              
                                = "0";              
                                }              
                                else {              
                                document.getElementById("navlist").style.elevation              
                                = "-60px";              
                                }              
                                }              
                                </                script                >              
                </                body                >              
                </                html                >              