путевые точки jQuery

Я использую путевые точки jQuery, чтобы изменить стиль моего заголовка, когда пользователь начинает прокручивать страницу вниз. Однако я изо всех сил пытаюсь заставить заголовок вернуться к своему естественному стилю, когда он возвращается в верхнюю часть экрана, то есть: пользователь прокручивает вверх.

$(document).ready(function(){
       $('.slide-wrap').waypoint(function() {
           $("#header").animate({backgroundColor: 'black'},2000,function(){
               bgColor = 'black';
           }) 
        });             
});

В настоящее время у меня есть это до сих пор, которое отлично работает при прокрутке страницы.

Любая помощь приветствуется.

Большое спасибо


jquery jquery-waypoints
person Ben    schedule 25.07.2012    source источник
comment
Я не знаком с плагином waypoint. Но может быть $("#header").waypoint(function(){ $("#header").css("background-color","white")});   -  person JP Hellemons    schedule 25.07.2012
comment
var scrolling = 0, $(window).scroll(function(){ if(scrolling == 0){$('#header').animate({backgroundColor: 'black'},2000); scrolling = 1;} }); Для этого не нужен никакой плагин.   -  person Ohgodwhy    schedule 25.07.2012

Ответы (2)


arrow_upward
3
arrow_downward

Чтобы основываться на ответе @jimy, обратному вызову путевой точки дается объект Event и строка, указывающая направление. Используйте эту строку направления, чтобы выяснить, к какому цвету вы должны анимировать:

$('.slide-wrap').waypoint(function(event, direction) {
  var color = direction === 'down' ? 'black' : 'yourOriginalColor';
  $('#header').stop().animate({ backgroundColor: color }, 2000);
});

Обновление: Waypoints 2.0 не передает объект события, только строку направления:

$('.slide-wrap').waypoint(function(direction) {
  var color = direction === 'down' ? 'black' : 'yourOriginalColor';
  $('#header').stop().animate({ backgroundColor: color }, 2000);
});
person imakewebthings    schedule 25.07.2012

arrow_upward
-1
arrow_downward

Вы можете попробовать это

var headercolor = $("#header").css("background-color");
$('.slide-wrap').waypoint(function(event, direction) {
   if (direction === 'down') {
      $("#header").animate({backgroundColor: 'black'},2000,function(){
          bgColor = 'black';
      });
   }
   else {
       $("#header").animate({backgroundColor: headercolor},2000,function(){
          //bgColor = 'black';
      });
   }
});
person jimy    schedule 25.07.2012
comment
Ответ @imakewebthings более продуман - person jimy; 26.07.2012
comment
Событие больше не проходит. - person Neil; 28.04.2016