CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dmengstrom
dmengstrom

Reputation: 11

Nav not fixed at top of page after scroll?

I am trying to get a script to work which will fix the nav element at the top of the page when you scroll down the page to the nav tag. However what it is doing now is that is starts fixing at the top of the page only when your have scrolled down half of the page well past the nav tag? You can view the page in question here

Script

 <script>
$(document).ready(function(){
 $(window).bind('scroll', function() {
var navHeight = $( window ).height() - 25;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
 }
 else {
$('nav').removeClass('fixed');
 }
});
});
</script>

HTML

<nav id="nav_desktop"> 

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#dt">Downtown Tour</a></li>
    <li><a href="#gt">Growth Tour</a></li>
    <li><a href="#lt">Landmarks Tour</a></li>
    <li><a href="#ct">Contact</a></li>
</ul>

CSS

.fixed {
position: fixed;
top: 0;
height: 25px;
z-index: 1;
}

Upvotes: 0

Views: 637

Answers (2)

Nishant Kumar
Nishant Kumar

Reputation: 71

You can see that the navbar in your site is fixing if you scroll down at the bottom of the page. so if you want it to be fixed once the navbar scrolls out of viewport you can try the following code:

<script>
    $(document).ready(function(){
        var navHeight = $( 'nav' ).offset().top;
        $(window).bind('scroll', function() {
            if ($(window).scrollTop() > navHeight) {
                $('nav').addClass('fixed');
            }
            else {
                $('nav').removeClass('fixed');
            }
        });
    });
</script>

The $('nav').offset().top; gets the top position of the navbar with respect to the document's top position. So once you scroll more than that value, the fixed class is added to it.

Also I would recommend you to change some css property of fixed class. you should keep it as follows:

.fixed {
    position: fixed;
    top: 0;
    width: 88%;
    height: 25px;
    z-index: 1;
}

You have to set width(88% in your navbar's case) to the fixed positioned elements as position:fixed takes the width according to the content of the div and not the full width.

Upvotes: 0

Wolverine
Wolverine

Reputation: 1702

var navHeight = $(window).height() - 25;

This line won't fix your nav to the top as you would expect. It just gets the window height and subtracts it by 25.

You first need to get the offsetTop value of the nav bar to check if the scrollTop value of the window reaches the offsetTop of the nav bar.

<script>
    $(document).ready(function(){
        var navTop = $('.nav').position().top; // returns and assigns the offset top of the nav bar

        $(window).bind('scroll', function() {
            if($(window).scrollTop() >= navTop) { // condition met if the scroll top value is greater than or equal to the offset top of the nav bar
                $('nav').addClass('fixed');
            }
            else if($(window).scrollTop() < navTop) { //condition met if the scroll top value is only lower than the offset top of the nav bar
                $('nav').removeClass('fixed');
            }
        });
    });
</script>

I hope it helps!

Upvotes: 1

Related Questions