SlideDown 不適用於 fullPage.js

Question

伙計們。 我在試圖理解如何修復它時頭疼，但我根本不懂 JavaScript。 所以，請幫我解決這個問題。 問題是，當啟用 fullPage.js 時，ScrollDown（可能和 Up）不起作用。 查看代碼。

滑下：

    jQuery(document).ready(function(e){
// -- menu ---\
$(window).scroll(function () {
  var html = document.documentElement;
       // $(".blockMenu").css("top",$(document).scrollTop())
       if($('html').width()>1000){
         if($(document).scrollTop()>=200){
          $('.hedMenu').slideUp()
          $('.hedMenu2').slideDown()
        }
        else{
          $('.hedMenu2').slideUp()
          $('.hedMenu').slideDown()
        }
      }
    })
})

完整頁面：

 $(document).ready(function() {
    $('#fullpage').fullpage({
     sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
     anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
     menu: '#menu',
     afterLoad: function(anchorLink, index){

        //section 2
        if(index == 2){
          //moving the image
          $('#section1').find('img').delay(500).animate({
           left: '0%'
         }, 1500, 'easeOutExpo');

          $('#section1').find('p').first().fadeIn(1800, function(){
           $('#section1').find('p').last().fadeIn(1800);
         });;

        }

       //section 3
       if(anchorLink == '3rdPage'){
          //moving the image
          $('#section2').find('.intro').delay(500).animate({
           left: '0%'
         }, 1500, 'easeOutExpo');
        }
      }
    });

  });

Answer 1

HTML 不是物理標簽，因此它沒有寬度。

Answer 2

if($(document).scrollTop()>=200){在fullPage.js FAQ 中詳述的代碼中不起作用：

fullPage.js 實際上不會滾動站點，但會更改站點的 top 或 translate3d 屬性。 僅當使用 fullPage.js 選項 scrollBar:true 或 autoScrolling:false 時，它​​才會實際滾動站點，以供 scrollTop 屬性訪問。

這就是為什么你應該使用回調，或者使用 fullPage.js 的scrollBar:true選項

Answer 3

1. “slideDown”、“slideUp”或“slideToggle”持續時間應小於或等於200
2. 完成動畫后使用 reBuild()

例子：

    $( "#clickme" ).click(function() {
      $( "#book" ).slideDown( 150, function() {
        fullpage_api.reBuild();
      });
    });