CODEWITHSUNDEEP
jqueryjquery-waypoints
Ben
Ben

Reputation: 129

jQuery waypoints

I am using jQuery waypoints to change the style of my header when the user begins to scroll down the page. However I am struggling when trying to get the header to return to its natural style when it return to the top of the screen ie: the user scroll back to the top.

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

I currently have this so far, which work fine when scrolling down the the page.

Any assistance appreciated.

Many thanks

Upvotes: 2

Views: 2425

Answers (2)

imakewebthings
imakewebthings

Reputation: 3398

To build on @jimy's answer, the waypoint callback is given the Event object and a string indicating the direction. Use that direction string to figure out which color you should animate towards:

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

Update: Waypoints 2.0 does not pass an event object, only a direction string:

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

Upvotes: 3

jimy
jimy

Reputation: 4908

You can try this

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

Upvotes: -1

Related Questions