CODEWITHSUNDEEP
jquerycss
Codi
Codi

Reputation: 438

Scroll animation not functioning on scroll up

I have a header that nav that I am working on and the issue is that scrolling upwards does not slide up like it slides down, also the links disappear on scroll up at default state.

look at the jsfiddle, scroll down then scroll up i want the header to slide out like it slid in. the defaultlinks are now gone until refresh.

I have updated all my code here https://jsfiddle.net/r9bdrker/24/

ok the problem here is when you scroll down, then scroll back up the nav dont slide up like it slides down and then it removes the default links

STATUS UPDATE

OK I FIGURED out the problem, but need to figure out how to correct it, its my jquery code here is the updated version

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 250) {
                $('.header').addClass('fixed').addClass('active').removeClass('offset');                            
              } else {
                $('.header').removeClass('fixed').removeClass('active');
           }
        });
    });
})(jQuery);



$(document).ready(function(){
    $(this).scrollTop()>0;   
});



(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > -5) {
                $('.header').addClass('active').addClass('offset'); 
            }
        });
    });
})(jQuery);

when you open the page

the div class should be class="header active offset" when you scroll down the class should be class="header active fixed" and when you scroll up it should return to the default "header active offset"

but its not default state is "header active" should be "header active offset"

when scrolling it is "header active fixed" but its showing "header active fixed offset" scroll

Upvotes: 2

Views: 861

Answers (3)

Case
Case

Reputation: 281

Your CSS is fine, I reworked your jquery a bit.

(function($) {

  var header = $('.header');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      header.addClass('fixed active').off('transitionend');
        header.removeClass('offset').off('transitionend');
    } else if (header.hasClass('active')) {
      header.removeClass('active offset').one('transitionend', function() {
        header.removeClass('fixed');
          header.addClass('active offset');
      });
    }
  }).scroll();

})(jQuery);


$(document).ready(function(){
    $(this).scrollTop(0);   
    $('.header').addClass('active');
    $('.header').addClass('offset');
});

Upvotes: 1

shakeypress
shakeypress

Reputation: 71

The problem is because in the JS, you are adding and removing both classes .fixed and .active.

Based on your CSS, you actually want .fixed on the element in the HTML, and to add/remove .active in the JS only.

if ($(this).scrollTop() > 350) {
  $('.header').addClass('active');
} else {
   $('.header').removeClass('active');
}

Then you'll also need your transition on the .fixed class

.header.fixed {
  transition: transform .5s ease;
}

Demo: https://jsfiddle.net/hrzh9Lsc/

Upvotes: 1

Femi Oladeji
Femi Oladeji

Reputation: 365

You need to add a transition style to the css like this transition: all 2s; to the .fixed selector It ensures that any new rule being applied takes time to get applied. Instead of all you can specify the particular property you want to transform. Check http://www.w3schools.com/css/css3_transitions.asp for more details

Upvotes: 1

Related Questions