Как я могу отредактировать фиксированную навигационную панель при прокрутке до определенного вертикального положения (т. Е. Добавить тень)?

У меня здесь работает. Я просто отключил ваши значения, чтобы убедиться, что вы можете прокрутить достаточно далеко, чтобы условие было выполнено. Также добавлен #navLinks в ваш селектор whiteDropShadow.

Я бы дважды проверил, можете ли вы прокручивать страницу достаточно долго, чтобы сделать условную правдивость.

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;
}