javascript - 动态 header 仅适用于 index.html-6ren

javascript - 动态 header 仅适用于 index.html

转载作者：太空宇宙更新时间：2023-11-04 06:16:57

我正在构建一个网站，该网站的标题带有一个功能(如果我向下滚动，它会使标题变小)。问题是在 index.html 上它工作正常，但在我的第二页上，t 工作。为了创建第二页，我只是复制了第一页并添加了一些额外的内容。有谁知道可能是什么问题？

// SCROLLING EFFECT 
const mainNav = document.querySelector('.header');
const img = document.querySelector('.logo');


// Change size of logo↓↓↓
if (getComputedStyle(mainNav).height == '70px') {
  img.style.height = '70px';
} else {
  img.style.height = '100px';
}
// when scrolling down, make it smaller↓↓↓
window.addEventListener('scroll', function() {
  if (window.pageYOffset > 100) {
    mainNav.className += ' small';
    img.style.height = '70px';
  } else {
    mainNav.classList = 'header';
    img.style.height = '100px';
  }

})

.header {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  height: 100px;
  transition: all 1s;
}

<!-- !Header -->
<header class="header  ">
  <div class="container">
    <div class="header-content">
      <img src="/Core/img/logo1.jpg" class="logo" alt="logo">
      <div class="menu-links">
        <ul class="links-list">
          <li><a href="/Core/index.html">Home</a></li>
          <li><a href="/Core/biography.html">Bio</a></li>
          <li><a href="/Core/training.html">Training</a></li>
          <li><a href="#">Academy</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Store</a></li>
          <li><a href="#">Contacts</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

首页

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <title>Lazar Angelov</title>
</head>

<body>
  <!-- !Header -->
  <header class="header ">
    <div class="container">
      <div class="header-content">
        <img src="/Core/img/logo1.jpg" class="logo" alt="logo">
        <div class="menu-links">
          <ul class="links-list">
            <li><a href="/Core/index.html">Home</a></li>
            <li><a href="/Core/biography.html">Bio</a></li>
            <li><a href="/Core/training.html">Training</a></li>
            <li><a href="#">Academy</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Contacts</a></li>
          </ul>
          <ul class="social-links">
            <li><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
            <li><a href="#"><i class="fab fa-youtube fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>


  <!-- !FOOTER -->
  <footer id="main-footer">
    <div class="container">
      <div class="footer-content">
        <ul class="policy">
          <li>
            <small><a href="#">Copyright &copy; 2017 L.A. Fitness Group LTD</a></small>
          </li>
          <li>
            <a href="#"><small>Privacy Policy</small></a>
          </li>
          <li>
            <a href="#"><small>Terms and Conditions</small></a>
          </li>
          <li>
            <a href="#"><small>Cookie Policy</small></a>
          </li>
        </ul>
        <ul class="social-links">
          <li>
            <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-youtube fa-2x"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
  <script src="app.js"></script>
</body>

</html>

第二页

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <title>Lazar Angelov</title>
</head>

<body>
    <!-- !Header -->
    <header class="header  ">
        <div class="container">
            <div class="header-content">
                <img src="/Core/img/logo1.jpg" class="logo" alt="logo">
                <div class="menu-links">
                    <ul class="links-list">
                        <li><a href="/Core/index.html">Home</a></li>
                        <li><a href="/Core/biography.html">Bio</a></li>
                        <li><a href="/Core/training.html">Training</a></li>
                        <li><a href="#">Academy</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Store</a></li>
                        <li><a href="#">Contacts</a></li>
                    </ul>
                    <ul class="social-links">
                        <li><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
                        <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
                        <li><a href="#"><i class="fab fa-youtube fa-2x"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <!-- !FOOTER -->
    <footer id="main-footer">
        <div class="container">
            <div class="footer-content">
                <ul class="policy">
                    <li><small><a href="#">Copyright &copy; 2017 L.A. Fitness Group LTD</a></small></li>
                    <li><a href="#"><small>Privacy Policy</small></a></li>
                    <li><a href="#"><small>Terms and Conditions</small></a></li>
                    <li><a href="#"><small>Cookie Policy</small></a></li>
                </ul>
                <ul class="social-links">
                    <li><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
                    <li><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
                    <li><a href="#"><i class="fab fa-youtube fa-2x"></i></a></li>
                </ul>
            </div>
        </div>
    </footer>
    <script src="app.js"></script>
</body>

</html>

最佳答案

在每个页面的控制台中检查错误，而不仅仅是在 index.html 上可能是特定页面上的错误。

关于javascript - 动态 header 仅适用于 index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55868858/

文章推荐： python - 取样方法

文章推荐： html - 向右移动按钮

文章推荐： javascript - 在向上和向下滚动时向 div 添加类

文章推荐： javascript - 如何调试 ng-cloak AngularJS？

internet-explorer - 仅 Windows 7，仅 IE，认为我的网站证书有问题？
我仅在 WIN7 PC 上收到此通知，仅使用 IE。 Firefox 总是很好，旧版 Windows 上的 IE 似乎也不错。这让我大吃一惊，我不知道为什么 IE 认为 SSL 证书有问题。有没有人以
wix - 升级期间未复制文件(仅)
概述对于我产品的新版本 v1.9.0，我创建了一个新的 MSI 安装程序。该应用程序的先前版本是 v1.7.0。卸载旧版本然后安装新版本工作正常。但是当我尝试使用 v1.9.0 安装程序更新旧版
仅 JavaScript 按钮按下时平滑滚动
该网站有一个全高图像启动。更多内容位于首屏下方，图像底部有一个“滚动”元素，以提示用户发现其余内容。单击后，我成功地使网站向下滚动 300 像素。然而，我想顺利地做到这一点。这是我当前的代码: w
javascript - 动态创建类名。仅
var i = 0; function Myfunc() { var newdiv = document.createElement('div'); var el = document
仅 JavaScript 图像悬停
这纯粹是为了学习目的；我知道 CSS 将是这种情况下的首选方法。我知道在 JavaScript 中，您可以使用内联事件处理将鼠标悬停在图像上，如下所示: 我知道您可以在您的站点中安装 jQuery
仅 curl 发布数据和标题
我只想从curl请求中获取 header curl -I www.google.com 一切都很棒。现在我想这样做，但也传递发布数据: curl -I -d'test=test' www.google
javascript - 仅 getElementsByName？
以下代码旨在更改一个字段的颜色: Untitled Document var bkColor =
仅 Grep 第一个匹配项并停止
我正在使用 grep 递归搜索目录，并使用以下参数希望只返回第一个匹配项。不幸的是，它返回了不止一个——事实上，我上次查看时返回了两个。似乎我有太多的争论，尤其是没有得到想要的结果。 :-/ # gr
仅 grep 当前目录
我只想搜索当前目录中的所有文件。我试过这个 grep foo * 但我收到此错误 grep: bar: Is a directory 我也尝试过这个 grep -r foo 但这也在搜索子目录。最佳
JavaFx如何打印文本(仅)收据？
我正在构建一个销售点应用程序，我想打印一张收据。问题是我使用的打印机无法打印纯文本的任何图形，我在 javafx 中只能找到使用 Print API 打印节点或使用像 jasper 这样都包含图形的报
仅 Java 操作系统
是否有任何操作系统在完全加载时仅提供用于控制台应用程序执行的 java 环境？理想情况下，它会在加载时自动启动程序最佳答案这是一个名称为:JavaOS 的东西从我的角度来看，更好的方法是安装一个
仅 MySQL 转储还原增量
在工作中，我们有一个每晚执行 mysql 数据转储的脚本。对于开发，我们通常需要使用来自最近转储的数据。一段时间以来，我们一直每天都进行数据库还原，但现在我们已经到了每天还原花费近一个小时的地步。有没
javascript - 需要禁用下拉菜单的淡出功能(仅)
我的移动模式菜单有问题。 onClick 它淡出。我想保留此设置，但我不希望它在单击下拉部分时淡出。这是链接:http://jsfiddle.net/zLLzrs6b/3/感谢您的帮助! html:
仅 css 在屏幕尺寸变化时调整图像大小的灵活布局
经过大量研究和反复试验，我谦虚地向各位 CSS 专家寻求帮助。这就是我需要的: 我有两张图片:titlelogo 和 newlogo。在全屏模式下，newlogo 需要在左边，titlelogo 在
javascript - 选择具有特定属性的标签(仅)
这个问题在这里已经有了答案: Exclusive CSS selector (3 个答案) 关闭 3 年前。我的文档结构如下: ... ... something something someth
html - 强制可变宽度表格列内容以最大宽度换行*仅*
我有一个具有以下要求的表: 所有列的宽度必须可变所有列的宽度不得超过必要的宽度所有单元格必须保留空白(white-space:pre/pre-wrap) 当(且仅当)超过最大定义宽度 (1000p
c++ - 具有特殊字符的数字的正则表达式**仅**
我正在寻找一个正则表达式来仅匹配具有特殊字符且大小为4+ 的数字字符串。我对此处发布的问题做了一些评论: 测试网站: http://regexlib.com/RETester.aspx 1- re
仅 CSS 灯箱解决方案
我正在为我的元素开发一个纯 CSS 灯箱解决方案。我用谷歌搜索了它，但到目前为止只找到了部分解决方案。我正在寻找这些功能: 显示任意宽任意高的内容(无固定高/宽) 垂直居中和水平居中如果内容宽度和
仅 CSS 网格布局
出于各种原因，我目前正在尝试使用 HTML/CSS 创建网格布局(我知道 Bootstrap 等，但在这种情况下没有选择，而且我无法添加标记元素)。我有以下代码(容器 div，每次都有一个带有 ul
仅 Java 字符串格式小数
有没有办法使用String.format()格式化 double 以仅获取小数？ System.out.println(String.format("%.2f", 1.23456d)); 正如预期的那

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 动态 header 仅适用于 index.html