粘性标题在滚动时无法正常工作答案

【问题标题】：Sticky header not working correctly on scroll粘性标题在滚动时无法正常工作
【发布时间】：2017-04-29 04:09:49
【问题描述】：

我正在尝试实现一个粘性标题，在滚动超过 100-150 像素之前什么都不会发生。向上滚动时它会显示出来，向下滚动时它会再次隐藏，当您滚动回页面顶部时也会返回到它的原始状态。

这正是我想要的外观/感觉

https://medium.com/@heykylehey/making-the-practice-print-6c8292934932

这是我的开发网站的链接

http://www.alexcoven.com/dev/element/

用这个脚本

  var $body = $("body");
  var $wrapperTop = $(".sticky-container");
  var lastScrollTop = 0;
  $(window).scroll(function(event){
     var st = $(this).scrollTop();
     if(st < 100){
         $body.removeClass("header--fixed-up header--fixed");
         $wrapperTop.removeClass("animated fadeOutUp");
     }
     if(st < lastScrollTop) {
         $body.addClass("header--fixed-up header--fixed");
         $wrapperTop.removeClass('fadeOutUp').addClass("animated fadeInDown");
     } else if((st > lastScrollTop) && (st > 100)) {
         $wrapperTop.removeClass('fadeInDown').addClass("animated fadeOutUp");
     }
     lastScrollTop = st;
  });

这需要今天启动，我正在为这个问题感到压力，请帮助太爱了！

【问题讨论】：

它们对我来说完全一样。 Windows 10 铬 57.0.2987.133
如果你向上滚动到顶部会出现故障，你会看到它仍然有类标题--固定标题--固定在正文上。
我认为这是因为在向上滚动时它甚至在 100px 之前添加了类我只是不知道如何解决这个问题或添加一个条件来做到这一点。

标签： javascript jquery css header sticky

【解决方案1】：

$(window).scroll(function(event){
 var st = $(this).scrollTop();
 if(st < 100){
     $body.removeClass("header--fixed-up header--fixed");
     $wrapperTop.removeClass("animated fadeOutUp");
 }else if(st < lastScrollTop) {
     $body.addClass("header--fixed-up header--fixed");
     $wrapperTop.removeClass('fadeOutUp').addClass("animated fadeInDown");
 } else if((st > lastScrollTop) && (st > 100)) {
     $wrapperTop.removeClass('fadeInDown').addClass("animated fadeOutUp");
 }
 lastScrollTop = st;
});

【讨论】：

任何解释都会使这成为一个有价值的答案，而不仅仅是咀嚼的骨头；）
这是因为代码在两个if中输入所以它会出现故障
感谢您的帮助！

【解决方案2】：

没有 100% 工作

  var $body = $("body");
  var $wrapperTop = $(".sticky-container");
  var lastScrollTop = 0;
  $(window).scroll(function(event){
     var st = $(this).scrollTop();
     if(st < 100){
         $body.removeClass("header--fixed-up header--fixed");
         $wrapperTop.removeClass("animated fadeOutUp");
     }
     if((st < lastScrollTop) && (st > 100)) {
         $body.addClass("header--fixed-up header--fixed");
         $wrapperTop.removeClass('fadeOutUp').addClass("animated fadeInDown");
     } else if((st > lastScrollTop) && (st > 100)) {
         $wrapperTop.removeClass('fadeInDown').addClass("animated fadeOutUp");
         //$body.removeClass("header--fixed-up header--fixed");
     }
     lastScrollTop = st;
  });

我离它更近了，但当我返回页面顶部时仍然有问题。

通过添加

&& (st > 100))

到这一行

if((st < lastScrollTop) && (st > 100))

现在这将更改该行，以说明如果您向上滚动并且页面上超过 100 像素的地方执行，而不是如果您向上滚动则执行 ;)

【讨论】：

【解决方案3】：

终于修好了！

var $body = $("body");
      var $wrapperTop = $(".sticky-container");
      var lastScrollTop = 0;
      $(window).scroll(function(event){
         var st = $(this).scrollTop();
         if(st < 3){
             $body.removeClass("header--fixed-up header--fixed");
             $wrapperTop.removeClass("animated fadeInDown fadeOutUp");
         }
         if((st < lastScrollTop) && (st > 100)) {
             $body.addClass("header--fixed-up header--fixed");
             $wrapperTop.removeClass('fadeOutUp').addClass("animated fadeInDown");
         } else if((st > lastScrollTop) && (st > 100)) {
             $wrapperTop.removeClass('fadeInDown').addClass("animated fadeOutUp");
         }
         lastScrollTop = st;
      });

我将我的第一个 if 语句的值更改为 st

【讨论】：