如何添加fadeIn效果或過渡到滾動菜單？

Question

我的目標是在滾動菜單中產生非常好的過渡效果。 現在，當我向下滾動時，不涉及動畫，我嘗試自己做，但是沒有成功。 請幫我做到這一點。

這是我的代碼：

 $(window).scroll(function() { if ($(this).scrollTop() > 10) { $('nav').addClass("scroll-down").fadeIn('fast'); $('.header-container').hide(); } else { $('nav').removeClass("scroll-down").fadeIn('fast'); $('.header-container').show(); } }); 

 nav { position: fixed!important; width: 100%; text-align: center; color: #fff; font-family: 'Roboto Condensed', sans-serif; z-index: 9999; } nav.scroll-down { transition: all 0.4s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav-common"> <div class="container"> <div class="row"> <ul class="nav"> <li class="first active"><a href="/">Главная</a></li> <li><a href="produkcziya">Продукция</a></li> <li><a href="o-kompanii">О компании</a></li> <li class="dropdown"> <a href="infoblok" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Инфоблок</a> <ul class='dropdown-menu'> <li class="first"><a href="infoblok/novosti">Новости</a></li> <li class="last"><a href="infoblok/stati">Статьи</a></li> </ul> </li> <li><a href="oplata-i-dostavka">Оплата и доставка</a></li> <li><a href="kontaktyi">Контакты</a></li> <li class="last"><a href="postavshhikam">Поставщикам</a></li> </ul> </div> </div> </nav> 

Answer 1

試試這個，我還沒測試過，但這就是我一直在做的

  $(window).scroll(function() {
   if ($(this).scrollTop() > 10) {
     $('nav').fadeIn(300, function() { 
      $(this).addClass("scroll-down");
      $('.header-container').hide();
     });
   } else {
     $('nav').fadeOut(300, function() { 
       $(this).removeClass("scroll-down");
       $('.header-container').show();
     });
   }
  });

Answer 2

您需要弄清楚jquery的滾動部分。

過渡需要nav 。 您說的是您要過渡的內容，在本例中是所有內容。 第二堂課，您需要說出您要過渡的內容。

https://jsfiddle.net/fwftvma7/3/

.example {
  position: relative;
  width: 100%;
  height: 50px;
  top: 0;
  -webkit-transition: top 2s ease-in; /* Safari */
  transition: top 2s ease-in;
  border: 1px solid red;
}

.example.clicked {
  top: -50px;
}

您會看到我的.example是我想要轉換的內容，而我的.example.clicked是我想要轉換的內容。

Answer 3

嘗試以下腳本（替換頂部滾動箭頭圖像）：

 var scrolltotop = { setting: { startline: 100, scrollto: 0, scrollduration: 1e3, fadeduration: [500, 100] }, controlHTML: '<img src="http://via.placeholder.com/40x40" />', controlattrs: { offsetx: 5, offsety: 5 }, anchorkeyword: "#top", state: { isvisible: !1, shouldvisible: !1 }, scrollup: function() { this.cssfixedsupport || this.$control.css({ opacity: 0 }); var t = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto); t = "string" == typeof t && 1 == jQuery("#" + t).length ? jQuery("#" + t).offset().top : 0, this.$body.animate({ scrollTop: t }, this.setting.scrollduration) }, keepfixed: function() { var t = jQuery(window), o = t.scrollLeft() + t.width() - this.$control.width() - this.controlattrs.offsetx, s = t.scrollTop() + t.height() - this.$control.height() - this.controlattrs.offsety; this.$control.css({ left: o + "px", top: s + "px" }) }, togglecontrol: function() { var t = jQuery(window).scrollTop(); this.cssfixedsupport || this.keepfixed(), this.state.shouldvisible = t >= this.setting.startline ? !0 : !1, this.state.shouldvisible && !this.state.isvisible ? (this.$control.stop().animate({ opacity: 1 }, this.setting.fadeduration[0]), this.state.isvisible = !0) : 0 == this.state.shouldvisible && this.state.isvisible && (this.$control.stop().animate({ opacity: 0 }, this.setting.fadeduration[1]), this.state.isvisible = !1) }, init: function() { jQuery(document).ready(function(t) { var o = scrolltotop, s = document.all; o.cssfixedsupport = !s || s && "CSS1Compat" == document.compatMode && window.XMLHttpRequest, o.$body = t(window.opera ? "CSS1Compat" == document.compatMode ? "html" : "body" : "html,body"), o.$control = t('<div id="topcontrol">' + o.controlHTML + "</div>").css({ position: o.cssfixedsupport ? "fixed" : "absolute", bottom: o.controlattrs.offsety, right: o.controlattrs.offsetx, opacity: 0, cursor: "pointer" }).attr({ title: "Scroll to Top" }).click(function() { return o.scrollup(), !1 }).appendTo("body"), document.all && !window.XMLHttpRequest && "" != o.$control.text() && o.$control.css({ width: o.$control.width() }), o.togglecontrol(), t('a[href="' + o.anchorkeyword + '"]').click(function() { return o.scrollup(), !1 }), t(window).bind("scroll resize", function(t) { o.togglecontrol() }) }) } }; scrolltotop.init(); 

 .body { height:2000px; background: #333; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="body"> Scroll bottom </div>