使用barba.js创建SPA站点,但是在更新页面内容后无法使用我正在使用(fullpage.js)触发的另一个插件时遇到麻烦。
现在,我必须单击每个链接两次以触发fullpage.js
这是在barba.js修改DOM之后需要运行的功能:
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
我尝试了这个:
Barba.Dispatcher.on('initStateChange', function() {
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
});
...但是什么也没发生。
脚本包括:
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/footer-reveal.min.js"></script>
<script src="js/jquery.smoothState.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/contact.js"></script>
<script src="js/barba.min.js"></script>
<script src="js/ncscripts.js"></script>
“ ncscripts.js”的内容,我所有的功能都存在其中:
Barba.Pjax.start();
Barba.Dispatcher.on('initStateChange', function() {
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
});
$('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
$(document).ready(function() {
$('#close-button').click(function() {
$('#gallery').toggleClass('hidden');
});
});
$("#button").click(function() {
$('.cloak-hide').toggleClass('cloak-hide-active');
});
$("#button").click(function() {
$('.menu-transform').toggleClass('menu-transform-active');
});
$("#button").click(function() {
$('.resp-font-menu').toggleClass('resp-font-menu-transition-active');
});
$("#button").click(function() {
$('.menu-footer-content').toggleClass
('menu-footer-content-transition-active');
});
$("#button").click(function() {
$('.logo-black').toggleClass('logo-black-active');
});
$('.burger').click(function(){
$(this).toggleClass('active');
});
$("#navbar-nav-list-element-left").hover(function() {
$('.bar-left').toggleClass('bar-active');
});
$("#navbar-nav-list-element-middle").hover(function() {
$('.bar-middle').toggleClass('bar-active');
});
$("#navbar-nav-list-element-right").hover(function() {
$('.bar-right').toggleClass('bar-active');
});
$(window).scroll(function(){
var scroll = $(window).scrollTop();
$('#logo-black').css({'opacity':(( 60-scroll )/60)});
});
$('#container-master').footerReveal();
不知道如何前进。关于此问题的任何建议/建设性批评/反馈将大有帮助!
*此外,我不确定在“ ncscript.js”中的功能安排是否最佳(甚至“正确”)。关于最佳做法的任何建议将不胜感激。
最佳答案
尝试这个:
Barba.Dispatcher.on('newPageReady', function(current, prev, newContainer) {
$(newContainer).find('#fullpage').fullpage({
//Scrolling
autoScrolling:false,
scrollingSpeed: 2500,
easing: 'swing',
fitToSection: false,
});
});
关于javascript - 尝试将监听器添加到barba.js,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44443024/