协调触发页面标记的jQuery函数

Question

在我工作的网站上，出现了一个栏：

1。当用户将鼠标悬停在某个链接

上时

$("#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');
});

2。当用户访问该链接的特定内容时

$(function(){
 if (/(about.html)/.test(window.location.href)) {
  $('.bar-middle').addClass('bar-active-scroll');
 } else {
  $('.bar-middle').removeClass('bar-active-scroll');
 }
});

$(function(){
 if (/(work.html)/.test(window.location.href)) {
  $('.bar-left').addClass('bar-active-scroll');
 } else {
  $('.bar-left').removeClass('bar-active-scroll');
 }
});

$(function(){
 if (/(contact.html)/.test(window.location.href)) {
  $('.bar-right').addClass('bar-active-scroll');
 } else {
  $('.bar-right').removeClass('bar-active-scroll');
 }
});

第3。当用户向下滚动到主页上的特定点

时

$(function(){
  var stickyTop = $('#section2').offset().top;
  $(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= stickyTop) {
            $('.bar-left').addClass('bar-active-scroll');
        } else {
            $('.bar-left').removeClass('bar-active-scroll');
        }
    });
});

我的网站是单页应用程序＆amp;我使用barba.js来处理AJAX。考虑到这一点：

每次加载/刷新DOM时都会运行这些函数（通过索引页底部的＆＃39;脚本中包含的.js文件（仅限于那里，因为其他＆＃39;页面＆ ＃39;通过AJAX添加））

$(function(){
var stickyTop = $('#section2').offset().top;
 $(window).on( 'scroll', function(){
    if ($(window).scrollTop() >= stickyTop) {
        $('.bar-left').addClass('bar-active-scroll');
    } else {
        $('.bar-left').removeClass('bar-active-scroll');
    }
 });
});

$("#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');
});

...每次barba.js更新内容时都会运行这些功能

$(function(){
 if (/(about.html)/.test(window.location.href)) {
  $('.bar-middle').addClass('bar-active-scroll');
 } else {
  $('.bar-middle').removeClass('bar-active-scroll');
 }
});

$(function(){
 if (/(work.html)/.test(window.location.href)) {
  $('.bar-left').addClass('bar-active-scroll');
 } else {
  $('.bar-left').removeClass('bar-active-scroll');
 }
});

$(function(){
 if (/(contact.html)/.test(window.location.href)) {
  $('.bar-right').addClass('bar-active-scroll');
 } else {
  $('.bar-right').removeClass('bar-active-scroll');
 }
});

$(function(){
  var stickyTop = $('#section2').offset().top;
  $(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= stickyTop) {
            $('.bar-left').addClass('bar-active-scroll');
        } else {
            $('.bar-left').removeClass('bar-active-scroll');
        }
    });
});

我的问题：如果我导航到另一个页面（触发barba.js）并返回我的主页，然后滚动，直到我触发栏，栏保持活动状态滚动回到顶部后。

我很确定我需要使用＆＃39; .off＆＃39;在.bar-left，.bar-middle＆amp; .bar-在页面刷新时正确，但我不确定如何正确实现这一点。

非常感谢任何建议/建设性的批评/建议！

这是触发barba.js时运行的完整代码块

document.addEventListener("DOMContentLoaded", function() {
if (!('webkitClipPath' in document.body.style)) {
alert('Sorry, this demo is available just with webkitClipPath. Try with 
Chrome/Safari.');
}

Barba.Pjax.init();
Barba.Prefetch.init();


var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
 * This function is automatically called as soon the Transition starts
 * this.newContainerLoading is a Promise for the loading of the new 
container
 * (Barba.js also comes with an handy Promise polyfill!)
 */

// As soon the loading is finished and the old page is faded out, let's 
fade the new page
Promise
  .all([this.newContainerLoading, this.fadeOut()])
  .then(this.fadeIn.bind(this));
},

fadeOut: function() {
/**
 * this.oldContainer is the HTMLElement of the old Container
 */

return $(this.oldContainer).animate({ opacity: 0 }).promise();
},

fadeIn: function() {
/**
 * this.newContainer is the HTMLElement of the new Container
 * At this stage newContainer is on the DOM (inside our #barba-
container and with visibility: hidden)
 * Please note, newContainer is available just after 
newContainerLoading is resolved!
 */
document.body.scrollTop = 0;
var _this = this;
var $el = $(this.newContainer);

$(this.oldContainer).hide();

$el.css({
  visibility : 'visible',
  opacity : 0
});

initFullpagePlugin($el);

$(function(){
if (/(about.html)/.test(window.location.href)) {
  $('.bar-middle').addClass('bar-active-scroll');
} else {
  $('.bar-middle').removeClass('bar-active-scroll');
}
});

$(function(){
if (/(work.html)/.test(window.location.href)) {
  $('.bar-left').addClass('bar-active-scroll');
} else {
  $('.bar-left').removeClass('bar-active-scroll');
}
});

$(function(){
if (/(contact.html)/.test(window.location.href)) {
  $('.bar-right').addClass('bar-active-scroll');
} else {
  $('.bar-right').removeClass('bar-active-scroll');
}
});

$(function(){
  var stickyTop = $('#section2').offset().top;
  $(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= stickyTop) {
            $('.bar-left').addClass('bar-active-scroll');
        } else {
            $('.bar-left').removeClass('bar-active-scroll');
        }
    });
});


$el.animate({ opacity: 1 }, 400, function() {
  /**
   * Do not forget to call .done() as soon your transition is finished!
   * .done() will automatically remove from the DOM the old Container
   */
  _this.done();
});
}
});