How to use jQuery to implement a sticky navigation bar



Image not found!!

To implement a sticky navigation bar using jQuery, you can use a combination of HTML, CSS, and jQuery. Here's a simple example:

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="script.js"></script>
    <title>Sticky Navigation Bar</title>
</head>
<body>

    <div class="header">
        <h1>Your Website</h1>
        <nav class="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>
    </div>

    <div id="section1" class="section">
        <h2>Section 1 Content</h2>
        <!-- Your content here -->
    </div>

    <div id="section2" class="section">
        <h2>Section 2 Content</h2>
        <!-- Your content here -->
    </div>

    <div id="section3" class="section">
        <h2>Section 3 Content</h2>
        <!-- Your content here -->
    </div>

</body>
</html>

CSS (styles.css):

css
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

.header {
    background-color: #333;
    padding: 10px;
    color: white;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    display: inline-block;
    margin-right: 20px;
}

.navbar a {
    text-decoration: none;
    color: white;
}

.section {
    padding: 50px 0;
}

jQuery (script.js):

js
$(document).ready(function () {
    var header = $(".header");
    var sticky = header.offset().top;

    $(window).scroll(function () {
        if (window.pageYOffset > sticky) {
            header.addClass("fixed");
        } else {
            header.removeClass("fixed");
        }
    });
});

This example assumes you have jQuery included in your project. Adjust the HTML structure and styling according to your specific requirements. The JavaScript code checks the scroll position and adds a "fixed" class to the header when the user scrolls past it. The fixed class should have the necessary styles to make the header stick to the top of the page.

Category List