How can I edit my fixed nav-bar upon scrolling to a specific vertical position (i.e., add a drop shadow)?

Question

I'm trying to add a drop shadow to my site's fixed navigation bar when it reaches a certain section. Can anyone explain why this isn't working?

In my .CSS,

.whiteDropShadow {
-moz-box-shadow: 0 0 10px #FFFFFF; 
-webkit-box-shadow: 0 0 10px #FFFFFF;
-o-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
}

In my .JS,

$(function() {

// Initial top offset from ABOUT section
var topOffset = $('#about').offset().top;

// FUNCTION: adds class to #navLinks when vertical distance from the top is larger than the initial top offset.
var editNavBar = function(){
    var verticalDistance = $(window).scrollTop(); // Current vertical distance from the top

    if (verticalDistance > topOffset) { 
        $('#navLinks').addClass('.whiteDropShadow');
    } else {
        $('#navLinks').removeClass('.whiteDropShadow');
    }
};

// Run upon scrolling
$(window).scroll(function() {
     editNavBar();
});

});

Answer 1

I have it working here. I just logged out your values to make sure you could scroll far enough for the conditional to be hit. Also added #navLinks to your whiteDropShadow selector.

I'd double check your able to scroll long enough on your page to make your conditional truthy.

http://jsfiddle.net/y2zu5cwn/

<div id="navLinks">
    <a href="#">item1</a>
    <a href="#">item 2</a>
    <a href="#">item 3</a>
</div>

<div class="container">
    <div id="spacer">
        <p>Just for space</p>
    </div>

    <div id="about">
        <p>about</p>
    </div>    
</div>

// Initial top offset from ABOUT section
var topOffset = $('#about').offset().top;

// FUNCTION: adds class to #navLinks when vertical distance from the top is larger than the initial top offset.
var editNavBar = function(){
    var verticalDistance = $(window).scrollTop(); // Current vertical distance from the top
    console.log( verticalDistance, topOffset );


    if (verticalDistance > topOffset) { 
        $('#navLinks').addClass('whiteDropShadow');
    } else {
        $('#navLinks').removeClass('whiteDropShadow');
    }
};

// Run upon scrolling
$(window).scroll(function() {
     editNavBar();
});

#navLinks {
    position: fixed;
    top: 0;
    width: 100%;
    height: 20px;
    background: #aeaeae;
}



#navLinks a { color: #000;}

#navLinks.whiteDropShadow {
-moz-box-shadow: 0 0 10px #FFFFFF; 
-webkit-box-shadow: 0 0 10px #FFFFFF;
-o-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
}

.container { height: 1400px; }

#spacer {
    display: block;
    height: 500px;
    background: green;
}

#about {
    display: block;
    height: 500px;
    background: red;
}

Answer 2

jquery-waypoints

Here is a site I used this for... http://cardbinder.herokuapp.com/card_sets/magic-2014/cards

You basically choose an element to be the trigger, then when that element hit's the top (or bottom) of the screen (or an offset from it), the element gets a class added to it. You're free to do what you will with that class at that point. I use the same library for lazy loading images on that same page.