Sticky Navigation using JavaScript

JavaScript Project

Creating a sticky navigation using JavaScript involves manipulating the CSS of the navigation element based on the scroll position of the webpage. Here's an example of how you can implement a sticky navigation:

1. Set up your HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Navigation Example</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav id="navbar">
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>
    <section id="section1">Section 1</section>
    <section id="section2">Section 2</section>
    <section id="section3">Section 3</section>

    <script src="script.js"></script>
</body>
</html>

2. Create a CSS file (styles.css) to style the target element:

css
body {
    margin: 0;
    padding: 0;
}

nav {
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    margin-right: 20px;
}

nav a {
    text-decoration: none;
}

section {
    height: 100vh;
    padding: 50px;
}

#section1 {
    background-color: lightblue;
}

#section2 {
    background-color: lightgreen;
}

#section3 {
    background-color: lightyellow;
}

3. Now, create a JavaScript file (script.js) to handle the sticky navigation:

javascript
document.addEventListener('DOMContentLoaded', function () {
    const navbar = document.getElementById('navbar');
    const sections = document.querySelectorAll('section');

    function toggleStickyNav() {
        const scrollPosition = window.scrollY;

        sections.forEach((section) => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                section.classList.add('active');
            } else {
                section.classList.remove('active');
            }
        });

        if (scrollPosition > 0) {
            navbar.classList.add('sticky');
        } else {
            navbar.classList.remove('sticky');
        }
    }

    window.addEventListener('scroll', toggleStickyNav);
});

4. Place all the files (HTML, CSS, and JS) in the same folder.

Open the HTML file in a web browser, and you should see a sticky navigation bar. As you scroll through the sections, the active section will be highlighted in the navigation bar. When you scroll up to the top of the page, the navigation bar will no longer be sticky.

Adjust the CSS classes and styles as per your design requirements. You can customize the behavior and appearance of the sticky navigation by modifying the JavaScript logic and CSS styles.

Output:

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc

facebook.com/pythontpoint

twitter.com/pythontpoint

instagram.com/pythontpoint

Join our newsletter for the latest updates.

About us

pythontpoint.org : The best online tutorial to learn Python, Machine Learning, Deep Learning, Data Science, Power BI, SQL & Java.
We Provide best Academic training, Corporate training, Project & Internship.

Our Services

Corporate & Academic Training
Website Designing
Website Development
Digital Marketing
Project & Thesis

Contact Us

Plot No-741, 2nd Floor, Jayadev Vihar, 751013, Bhubaneswar, Odisha
Call :
0674-2361252
Mail : info@silansoftware.com
Contact Us
Privacy Policy

Our Courses

Our Tutorials