javascript - jQuery 窗口滚动代码格式问题

Question

新手:自己编写 jQuery

因此，一旦窗口向下滚动一定数量的像素后，我就遇到了让 jQuery 添加类的问题。

为了设置一点背景，导航栏当前有一些 jQuery，可以切换类以在单击时创建一点淡入淡出效果。它是静态的，位于页面上稍远的位置。我的问题是添加 jQuery，当窗口向下滚动时，该 jQuery 会继续添加类，以基本上添加类，一旦静态导航不可见，该类将使导航栏固定到页面顶部。

我正在使用自定义 .js 函数文件创建一个子主题 - 这是迄今为止有效的代码:

    jQuery(document).ready(function($) {   
    $('.testimonials').bxSlider();

   $('.home .siteBrand').click(function(){
        $('.home .x-navbar').toggleClass("x-navbarOpen");
        $('.home .x-navbar').addClass("ani");
        $('.home .x-nav-wrap.desktop').toggleClass("siteBrandOpen");
        $('.home .x-nav-wrap.desktop').addClass("ani");
        $('.home .x-navbar .desktop .x-nav > li > a').toggleClass("menuOpen");
        $('.home .x-navbar .desktop .x-nav > li > a').addClass("ani");

    });
});

以下代码是在另一个站点上运行的代码:

var $j = jQuery.noConflict();   

$j(window).scroll(function() {    
    var scroll = $j(window).scrollTop();

    if (scroll >= 750) {
        $j(".home .x-navbar").addClass("x-navbar-fixed-top");
    } else {
        $j(".home .x-navbar").removeClass("x-navbar-fixed-top");
    }
});

它仅在将代码添加到主题的自定义 Javascript 功能时才有效，但我需要将其全部放在子主题的自定义 .js 文件中，并且在多次使用代码后，我不确定如何格式化此代码片段使其在自定义文件中工作。我注意到的问题之一是，无论我在主题功能中添加窗口滚动代码还是尝试在自定义文件中使用它，在自定义文件中运行的代码都会停止。

谁能告诉我我做错了什么？谢谢你! :)

Answer 1

听起来你需要注释掉......

//var $j = jQuery.noConflict();

...并将从 $j 到 $ 的每个引用替换为 $。

“其他站点”可能包含 2 个版本的 jQuery，并通过添加 .noConflict() 方法解决了此问题。由于我只能假设您的网站不是这种情况，因此您不应在复制/粘贴时包含该部分。但是，如果您这样做了，您就禁用了“自定义文件”脚本中所有先前的引用 $。这可以解释“自定义文件”脚本如何停止工作。

一些值得思考的问题:

// when all HTML is loaded on the page
// once the DOM is ready (short version)
$(function() {
    // make sure these elements are exeactly selected as intended by using a developer toolbar (usually key F12)
    var win = $(window),
        testimonials = $('.testimonials'),
        home = $('.home'),
        sitebrand = home.find('.siteBrand'),
        navbar = home.find('.x-navbar'),
        navwrap = home.find('.x-nav-wrap.desktop'),
        anchor = navwrap.find('.x-nav > li > a');

    // start initialising other libraries ...
    testimonials.bxSlider();

    // ... or add events
    sitebrand.click(function(){
        navbar.toggleClass('x-navbarOpen').addClass('ani');
        navwrap.toggleClass('siteBrandOpen').addClass("ani");
        anchor.toggleClass('menuOpen').addClass('ani');
    });

    win.scroll(function() {    
        navbar.toggleClass('x-navbar-fixed-top', win.scrollTop() >= 750);
    });
});