Question

我正在建立一个网站，该网站的标头带有功能（如果向下滚动，则会缩小标头）。问题是在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>

Answer 1

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

Answer 2

听起来这是一个实例，其中客户端的javascript解释器未重置滚动值或未加载。

我将重置滚动位置。在下一页上的加载方式：

Where

，然后在head标签之间的顶部：

var filteredData = data.Select(x => new Tuple<string, List<Pupil>>(x.Item1, x.Item2.Where(y => y.Grade == 10).ToList()))
                   .Where(x => x.Item2.Any())
                   .ToList();

动态标题仅适用于index.html

2 个答案: