CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Josh Murray
Josh Murray

Reputation: 31

sticky nav bar trick (jquery fixed)

Basically, when the nav bar (or whatever element) reaches the top of the page or window, it will add a class of sticky to the element and the CSS will make it fixed. Works as an IF statement so when it is no where near the top it removes the class so it is back to normal.

I have completed all the code correctly, double and triple checking everything. When in the Developer tools on Chrome, I can see the jQuery is doing it's job correctly, adding and removing the class at the right time, just the CSS doesn't seem to work.

$(document).ready(function() {
    
    var stickyNavTop = $('nav').offset().top;
    
    var stickyNav = function() {
        
        var scrollTop = $(window).scrollTop();
        
        if (scrollTop > stickyNavTop) {
            
            $('nav').addClass('sticky');
            
        } else {
            
            $('nav').removeClass('sticky');
        
        }
    };
    
    stickyNav();
    
    $(window).scroll(function() {
        stickyNav();
    });
});
* {
    margin: 0;
    padding: 0;
    font-family: "Helvetice Neue", sans-serif;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeue.otf");
}

html, body {
    width: 100%;
    height: 100%;
}

div#container {
    width: 100%;
    height: 100%;
}

div#content {
    width: 100%;
    height: 100%;
}

section#main-bg {
    width: 100%;
    height: 100%;
}

#main-bg img {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -9999; /* always on bottom */
}

nav {
    width: 100%;
    height: 60px;
    bottom: -60px;
    background-color: #333333;
}

/* nav */ .sticky {
    position: fixed;
}

nav ul {
    float: right;
}

nav ul li {
    float: left;
    margin-left: 40px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 20px;
    line-height: 60px;
}

div#content {
    width: 100%;
    height: 2000px;
    background-color: #dedede;
    bottom: 0;
}
<!DOCTYPE html>
<html>
    <head>

        <title>Josh Murray | My Personal Page</title>    
        <meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/main_styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="scripts/homemadeSticky.js"></script>
    
    </head>
    
    <body>
        
        <div id="container">
                
                <section role="banner" id="main-bg">
                    
                    <!-- this is where the full screen image will be -->
                    
                    <img src="img/bg.jpg">
                    
                </section>
                
                <nav>
                    
                    <ul>
                        
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        
                    </ul>
                    
                </nav>
                
                <div id="content">
                    
                    <!-- content in here -->
                    
                </div>
            
        </div>
        
    </body>

</html>

Thank you in advance

Upvotes: 0

Views: 237

Answers (1)

dave
dave

Reputation: 64657

Your css doesn't tell it where to be fixed, just change it to

.sticky {
    position: fixed;
    top: 0;
}


$(document).ready(function() {
    
    var stickyNavTop = $('nav').offset().top;
    
    var stickyNav = function() {
        
        var scrollTop = $(window).scrollTop();
        
        if (scrollTop > stickyNavTop) {
            
            $('nav').addClass('sticky');
            
        } else {
            
            $('nav').removeClass('sticky');
        
        }
    };
    
    stickyNav();
    
    $(window).scroll(function() {
        stickyNav();
    });
});
* {
    margin: 0;
    padding: 0;
    font-family: "Helvetice Neue", sans-serif;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeue.otf");
}

html, body {
    width: 100%;
    height: 100%;
}

div#container {
    width: 100%;
    height: 100%;
}

div#content {
    width: 100%;
    height: 100%;
}

section#main-bg {
    width: 100%;
    height: 100%;
}

#main-bg img {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -9999; /* always on bottom */
}

nav {
    width: 100%;
    height: 60px;
    bottom: -60px;
    background-color: #333333;
}

/* nav */ .sticky {
    position: fixed; top: 0;
}

nav ul {
    float: right;
}

nav ul li {
    float: left;
    margin-left: 40px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 20px;
    line-height: 60px;
}

div#content {
    width: 100%;
    height: 2000px;
    background-color: #dedede;
    bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>

        <title>Josh Murray | My Personal Page</title>    
        <meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/main_styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="scripts/homemadeSticky.js"></script>
    
    </head>
    
    <body>
        
        <div id="container">
                
                <section role="banner" id="main-bg">
                    
                    <!-- this is where the full screen image will be -->
                    
                    <img src="img/bg.jpg">
                    
                </section>
                
                <nav>
                    
                    <ul>
                        
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        
                    </ul>
                    
                </nav>
                
                <div id="content">
                    
                    <!-- content in here -->
                    
                </div>
            
        </div>
        
    </body>

</html>

Upvotes: 2

Related Questions