外部JS文件代码失效求助：原HTML内嵌JS可正常运行

我的一段JS代码在HTML文件内嵌时可正常运行，但移至外部.js文件后失效。因需在多页面复用该代码，故计划迁移至外部JS文件，恳请各位技术人士帮忙排查解决，感谢您的时间。

HTML内嵌可运行代码 #

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        navbar_height = document.querySelector(".navbar").offsetHeight;
        document.body.style.paddingTop = navbar_height + "px";
    });
    
    window.addEventListener("DOMContentLoaded", (event) => {
        var lastScrollTop = 0;
        jQuery(window).scroll(function () {
            var st = jQuery(window).scrollTop();
            if (st > lastScrollTop) {
                jQuery("nav.navbar:not(.navbar-transparent)").slideUp();
            } else {
                jQuery("nav.navbar:not(.navbar-transparent)").slideDown();
            }
            lastScrollTop = st;
        });
    });
</script>

外部JS失效代码 #

$(document).addEventListener("DOMContentLoaded", function () {
    navbar_height = document.querySelector(".navbar").offsetHeight;
    document.body.style.paddingTop = navbar_height + "px";
});

$(window).addEventListener("DOMContentLoaded", (event) => {
    var lastScrollTop = 0;
    jQuery(window).scroll(function () {
        var st = jQuery(window).scrollTop();
        if (st > lastScrollTop) {
            jQuery("nav.navbar:not(.navbar-transparent)").slideUp();
        } else {
            jQuery("nav.navbar:not(.navbar-transparent)").slideDown();
        }
        lastScrollTop = st;
    });
}); 

失效原因与修正方案 #

核心错误点 #

外部代码里错误混用了jQuery对象与原生DOM方法：

• $(document)返回的是jQuery包装对象，原生DOM的addEventListener方法不能直接调用在jQuery对象上，这会导致代码报错无法执行。
• 重复在window上绑定DOMContentLoaded事件属于冗余操作，该事件绑定在document上更为规范。

修正后的外部JS代码 #

推荐两种写法，任选其一即可：

写法一：原生事件绑定+jQuery逻辑兼容

document.addEventListener("DOMContentLoaded", function () {
    // 用const声明变量避免全局污染
    const navbar_height = document.querySelector(".navbar").offsetHeight;
    document.body.style.paddingTop = navbar_height + "px";

    let lastScrollTop = 0;
    jQuery(window).scroll(function () {
        const st = jQuery(window).scrollTop();
        if (st > lastScrollTop) {
            jQuery("nav.navbar:not(.navbar-transparent)").slideUp();
        } else {
            jQuery("nav.navbar:not(.navbar-transparent)").slideDown();
        }
        lastScrollTop = st;
    });
});

写法二：全jQuery风格（更简洁）

// jQuery的DOM ready简写，等价于DOMContentLoaded事件
$(function() {
    const navbar_height = $(".navbar").offset().height;
    $("body").css("paddingTop", navbar_height + "px");

    let lastScrollTop = 0;
    $(window).scroll(function () {
        const st = $(this).scrollTop();
        if (st > lastScrollTop) {
            $("nav.navbar:not(.navbar-transparent)").slideUp();
        } else {
            $("nav.navbar:not(.navbar-transparent)").slideDown();
        }
        lastScrollTop = st;
    });
});

额外注意事项 #

• 确保外部JS文件在jQuery的引入之后加载，比如HTML中顺序如下：

<script src="jquery.min.js"></script>
<script src="你的外部脚本文件.js"></script>

• 避免无声明的变量（比如原代码中的navbar_height），用const或let声明，减少全局变量污染。

内容的提问来源于stack exchange，提问作者ying