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

Question

Я пытаюсь добавить тень на фиксированную навигационную панель моего сайта, когда она достигает определенного раздела. Может ли кто-нибудь объяснить, почему это не работает?

В моей .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; 
} 

В моих .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

У меня здесь работает. Я только что выписал ваши значения, чтобы убедиться, что вы можете прокручивать достаточно далеко, чтобы условный сигнал был удален. Также добавлен #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; 
} 

Answer 2

jquery-waypoints

Вот сайт, я использовал это для ... http://cardbinder.herokuapp.com/card_sets/magic-2014/cards

Вы в основном выбрать элемент, чтобы быть триггером, а затем, когда этот элемент попал самый верхний (или снизу) экрана (или смещения от него), элемент получает класс, добавленный к нему. Вы можете делать то, что хотите, с этим классом. Я использую одну и ту же библиотеку для ленивых загружаемых изображений на эту же страницу.