2016-03-01 64 views
2

我對JavaScript稍微有些新東西,我該如何做到這一點,所以當用戶滾動一次時,它會觸發一次函數。
另外,你如何檢測fancybox中的滾動?我嘗試了多種類似.fancybox-inner的東西,但我無法抓住它。在Fancybox中檢測滾動一次+

小提琴:https://jsfiddle.net/jzhang172/bft7fb6t/3/

$('.section1').click(function(){ 
 
    $.fancybox({ 
 
    type: 'inline', 
 
    href: '#fancy-about', 
 
    helpers : { 
 
     overlay : { 
 
     css : { 
 
      'background' : 'blue' 
 
     } 
 
     } 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $('body').scroll(function(){ 
 
    alert('hey'); 
 
}); 
 
});
.parallax-window { 
 
    min-height: 400px; background: transparent; 
 

 
} 
 
body{ 
 
    height:2000px; 
 
} 
 
.section1{ 
 
    height:200px; 
 
    width:100%; 
 
    background:black; 
 
} 
 

 
#fancy-about{ 
 
    display:none; 
 
    color:white; 
 
    width:500px; 
 
    
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.js"></script> 
 
<div class="section1"></div> 
 

 
<div id="fancy-about"> 
 
<p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci. 
 

 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p> 
 
<div class="parallax-window" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png"></div><p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci. 
 

 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p> 
 
</div>

+0

您可以設置像hasScrolled變量= true,則調用該函數之前只檢查該 – DelightedD0D

回答

0

滾動一點也不比工作嘗試使用替代這款鼠標滾輪事件是工作

$('.section1').click(function(){ 
 
    $.fancybox({ 
 
    type: 'inline', 
 
    href: '#fancy-about', 
 
    helpers : { 
 
     overlay : { 
 
     css : { 
 
      'background' : 'blue' 
 
     } 
 
     } 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $('body').scroll(function(){ 
 
    alert('hey'); 
 
    }); 
 
}); 
 
$(window).bind('mousewheel DOMMouseScroll', function(event){ 
 
    alert('hey'); 
 
});
.parallax-window { 
 
    min-height: 400px; background: transparent; 
 

 
} 
 
body{ 
 
    height:2000px; 
 
} 
 
.section1{ 
 
    height:200px; 
 
    width:100%; 
 
    background:black; 
 
} 
 

 
#fancy-about{ 
 
    display:none; 
 
    color:white; 
 
    width:500px; 
 
    
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.js"></script> 
 
<div class="section1"></div> 
 

 
<div id="fancy-about"> 
 
<p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci. 
 

 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p> 
 
<div class="parallax-window" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png"></div><p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci. 
 

 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p> 
 
</div>

0

爲了使您的代碼的工作,你必須滾動功能移動到點擊功能:

$('.section1').click(function(){ 
$.fancybox({ 
    type: 'inline', 
    href: '#fancy-about', 
    helpers : { 
    overlay : { 
    css : { 
     'background' : 'blue' 
    } 
    } 
} 
}); 
    $('.fancybox-inner').bind('scroll',function() { 
    alert("ciao"); 
    }); 

}); 

your fiddle updated

0

你必須調用上的fancybox aftershow的做工精細滾動功能。

$('.section1').click(function(){ 
    $.fancybox({ 
    type: 'inline', 
    href: '#fancy-about', 
    helpers : { 
     overlay : { 
     css : { 
      'background' : 'blue' 
     } 
     } 
    }, 
    afterShow: function() { 
     $('.fancybox-inner').scroll(function(){ 
        alert('hey'); 
     }); 
    } 
    }); 
}); 

Demo Fiddle