Bootstrap透明导航栏JS功能异常求助：代码复制后仍无法运行

核心问题与修复步骤： #

1. 资源引用错误

   • 你用<script>标签引入CSS文件（bootstrap.min.css、font-awesome.min.css），这是完全错误的，CSS必须通过<link>标签引入。
   • jQuery引用顺序错误：Bootstrap依赖jQuery，必须在Bootstrap JS之前引入，否则JS逻辑无法正常执行。

2. 缺失关键样式支持

   • JS逻辑只是添加/移除.active类，但如果style.css里没有定义导航栏初始透明样式和.active类的切换样式，视觉上不会有任何变化。需要在style.css中添加：

     .navbar {
         background-color: transparent;
         transition: background-color 0.3s ease;
     }
     .navbar.active {
         background-color: #fff; /* 滚动后导航栏背景色，可按需修改 */
         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     }
     

3. 页面内容高度不足

   • 当前页面只有导航栏，没有足够的内容高度触发滚动事件，scrollTop()永远为0，JS逻辑根本不会执行。需要添加一个高区块让页面可滚动：

     <section style="height: 1000px; background-color: #f5f5f5;">
         <!-- 填充内容或仅占位 -->
     </section>
     

修正后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 正确引入CSS资源 -->
  <link rel="stylesheet" href="js/bootstrap.min.css">
  <link rel="stylesheet" href="js/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
  
  <title>Document</title>
</head>
<body>
  <header class="header">
    <nav class="navbar navbar-expand-lg fixed-top py-3">
        <div class="container">
            <a href="#" class="navbar-brand text-uppercase font-weight-bold">Transparent Nav</a>
            <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right">
                <i class="fa fa-bars"></i>
            </button>
            
            <div id="navbarSupportedContent" class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active"><a href="#" class="nav-link text-uppercase font-weight-bold">Home <span class="sr-only">(current)</span></a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">About</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Gallery</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Portfolio</a></li>
                    <li class="nav-item"><a href="#" class="nav-link text-uppercase font-weight-bold">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<!-- 添加可触发滚动的内容区块 -->
<section style="height: 1000px; background-color: #f5f5f5;">
    页面内容区域
</section>

<!-- 按正确顺序引入JS资源 -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
  $(function () {
    $(window).on('scroll', function () {
        if ( $(window).scrollTop() > 10 ) {
            $('.navbar').addClass('active');
        } else {
            $('.navbar').removeClass('active');
        }
    });
});
</script>
</body>
</html>

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