52.JQ---向上滚动显示，向下滚动隐藏

js:

var windowTop = 0;
$(window).scroll(function() {
   var scrolls = $(this).scrollTop();

   if(scrolls <= 0) {
      $("header").removeClass("showFixed").css({
                         "top": "43px"
                     })
   } else {
      if(scrolls >= windowTop) {
         windowTop = scrolls;
                     var screenWidth=$(document).width;
                     if(screenWidth>768){
                        $("header").removeClass("showFixed").addClass("hiddenFixed").css({
                         "top": "-113.72px"
                        })
                     }else{
                        $("header").removeClass("showFixed").addClass("hiddenFixed").css({
                           "top": "-245.72px"
                          })
                     }


      } else {
         windowTop = scrolls;

         $("header").addClass("showFixed").removeClass("hiddenFixed").css({
            "top": "0px"
         })
      }
   }

});
css:

header{
   background-color: rgba(0, 117, 193, 0.84);
   right: 0;
   left: 0;
   top: 0;
   transition: top 0.5s;
   z-index: 999;
}
.hiddenFixed{
   position: fixed;
   width: 100%;
   top: 0;
}
.showFixed{
   position: fixed;
   width: 100%;
   top: 0;
}

转载于:https://www.cnblogs.com/sqyambition/p/9341539.html