Question

我试图获得一个粘性标题，直到你滚动超过100-150px才会发生任何事情。而不是在向上滚动时，它会被显示出来，当向下滚动到页面顶部时，它会再次隐藏并再次返回到它的原始状态。

这是我想要的确切外观/感觉

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

这需要今天推出，而且我很紧张。在这个问题上请帮助非常爱！

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

我把它靠近了，但是当我回到页面顶部时仍然存在问题。

添加

&& (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＆lt; 3，当你在没有打嗝的页面顶部的背面做填充时，它会返回到它的原点。

粘滞标题在滚动时无法正常工作

3 个答案: