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” 当你向上滚动它应该返回默认的“标题有效偏移”

但不是默认状态是“标题有效” 应该是“标题主动偏移”

滚动时

是“标题有效固定” 但它显示“标题有效固定偏移量” 滚动

3 个答案:

答案 0 :(得分：1)

答案 1 :(得分：1)

答案 2 :(得分：1)

Answer 1

您需要向transition: all 2s;选择器添加css的转换样式，如.fixed选择器确保所应用的任何新规则都需要时间才能应用。您可以指定要转换的特定属性，而不是all。查看http://www.w3schools.com/css/css3_transitions.asp了解详情

Answer 2

问题是因为在JS中，您要添加和删除类.fixed和.active。

根据您的CSS，您实际上需要HTML中元素的.fixed，并且仅在JS中添加/删除.active。

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

然后您还需要transition班级上的.fixed

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

演示：https://jsfiddle.net/hrzh9Lsc/

Answer 3

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

滚动动画在向上滚动时无法正常工作

3 个答案: