SlideDown不适用于fullPage.js

时间:2015-01-07 10:43:33

标签: javascript slidedown fullpage.js

人。我试图理解,如何修复它,但我根本不懂JavaScript,让我头疼。所以,请帮助我。 问题是,当启用fullPage.js时,ScrollDown(可能和Up)不起作用。 见代码。

了slideDown:

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

  });

3 个答案:

答案 0 :(得分:0)

HTML不是物理标签,因此它没有宽度。

答案 1 :(得分:0)

if($(document).scrollTop()>=200){无法在您的代码中使用,详见fullPage.js FAQ

  

fullPage.js实际上并未滚动网站,但它会更改网站的top或translate3d属性。仅当使用fullPage.js选项scrollBar:true或autoScrolling:false时,它才会以scrollTop属性可访问的方式实际滚动网站。

这就是为什么你应该使用回调,或者使用fullPage.js的scrollBar:true选项

答案 2 :(得分:0)

  1. “ slideDown”,“ slideUp”或“ slideToggle”的持续时间应小于或等于200
  2. 完成动画后使用reBuild()

示例:

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