jquery - 向上滚动时滚动动画不起作用

Question

我有一个我正在处理的导航标题，问题是向上滚动不会像向下滑动那样向上滑动，而且在默认状态下向上滚动时链接也会消失。

查看 jsfiddle，向下滚动然后向上滚动我希望标题像滑入一样滑出。默认链接现在消失，直到刷新。

我在这里更新了所有代码 https://jsfiddle.net/r9bdrker/24/

好的，这里的问题是当你向下滚动，然后向上滚动导航时，不要像向下滑动那样向上滑动，然后它会删除默认链接

状态更新

好的，我解决了问题，但需要弄清楚如何更正它，我的 jquery 代码是更新版本

(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);

当你打开页面时

div 类应该是 class="header active offset"当你向下滚动时，类应该是 class="header active fixed"当你向上滚动时，它应该返回到默认的“header active offset”

但它不是默认状态是“header active”应该是“header active offset”

滚动时它是“header active fixed”但它显示“ header 事件固定偏移量”滚动

Answer 1

你的 CSS 没问题，我稍微修改了你的 jquery。

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