SlideDown 不适用于 fullPage.js
SlideDown doesn't work with fullPage.js
伙计们。我很头疼,想了解如何解决它,但我根本不知道 JavaScript。所以,请帮助我。
问题是,当启用 fullPage.js 时,ScrollDown(可能和向上)不起作用。
见代码。
向下滑动:
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');
}
}
});
});
HTML 不是物理标签,因此没有宽度。
if($(document).scrollTop()>=200){
在您的代码中不起作用,详见 fullPage.js FAQ:
fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
这就是为什么您应该使用回调,或使用 fullPage.js
的 scrollBar:true
选项
- "slideDown"、"slideUp" 或 "slideToggle" 持续时间应小于或等于 200
- 完成动画后使用 reBuild()
示例:
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( 150, function() {
fullpage_api.reBuild();
});
});
伙计们。我很头疼,想了解如何解决它,但我根本不知道 JavaScript。所以,请帮助我。 问题是,当启用 fullPage.js 时,ScrollDown(可能和向上)不起作用。 见代码。
向下滑动:
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');
}
}
});
});
HTML 不是物理标签,因此没有宽度。
if($(document).scrollTop()>=200){
在您的代码中不起作用,详见 fullPage.js FAQ:
fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
这就是为什么您应该使用回调,或使用 fullPage.js
的scrollBar:true
选项
- "slideDown"、"slideUp" 或 "slideToggle" 持续时间应小于或等于 200
- 完成动画后使用 reBuild()
示例:
$( "#clickme" ).click(function() {
$( "#book" ).slideDown( 150, function() {
fullpage_api.reBuild();
});
});