粘性 header 在滚动时无法正常工作

Question

我正在尝试实现一种粘性 header，在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时会显示出来，向下滚动时会再次隐藏，当您滚动回页面顶部时也会返回到原始状态。

这正是我想要的 look/feel

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

这是我的开发站点link

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

这需要在今天发布，我很紧张这个问题请帮忙太有爱了！

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

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

我更接近了，但是当我 return 到页面顶部时仍然有问题。

通过添加

&& (st > 100))

到这一行

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

这行现在更改为如果您向上滚动并且页面上超过 100px 执行而不是如果您向上滚动执行 ;)

Answer 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 < 3，这样当您回到页面顶部时它 returns 就是它的原点，没有打嗝做填充。

粘性 header 在滚动时无法正常工作

Sticky header not working correctly on scroll

javascript

css

jquery

header

sticky