动态标题仅适用于index.html

问题描述 投票：0回答：2

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

// 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>
javascript html css frontend
2个回答
1
投票

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

0
投票

好吧，这听起来像是客户端的javascript解释器没有重置滚动值，或者没有加载的实例。

我会重置滚动位置。在下一页加载：

<body onload="resetscroll()">

然后在头部标签之间的顶部：

     <script>
          function resetscroll() {
         window.scrollTo(0, 0);
            }
          </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.