Question

在我的示例中，如果将文档向下滚动一定量，则应将导航（固定在标题中）固定在浏览器窗口的顶部。

到目前为止，等效脚本仍然有效，但是在firefox和chrome中显示了以下问题（但在edge和IE11中却没有）：

如果文档被向下滚动并且导航固定，然后按下浏览器的重新加载按钮或F5键，或者当我离开页面然后返回时，导航保持固定。

我试图在每次加载事件时都删除“ .fixed”类，但是由于没有真正的重新加载，它当然不会生效。

我认为行为只能在单独的文档中复制吗？！

有人提示我如何解决问题吗？

var header, nav, navtop, verticalpos;

function fixed_nav() {

  "use strict";

  verticalpos = window.pageYOffset;

  if (verticalpos >= navtop) {

    nav.setAttribute('class', 'fixed');

  } else {

    nav.removeAttribute('class');

  }

}

function init() {

  "use strict";

  header = document.getElementsByTagName('header')[0];

  nav = header.getElementsByTagName('nav')[0];

  navtop = nav.getBoundingClientRect().top;

}

window.addEventListener('load', init, false);

window.addEventListener('scroll', fixed_nav, false);

* {
  padding: 0px;
  margin: 0px;
}

header {
  height: 15rem;
  background-color: lightpink;
}

nav {
  height: 5rem;
  background-color: lightblue;
}

main {
  background-color: lightsalmon;
  display: block;
  /* IE 11 */
}

div {
  max-width: 25rem;
  background-color: rgba(0, 0, 0, 0.2);
  margin: auto auto auto auto;
}

header>div {
  height: 10rem;
}

nav>div {
  height: 100%;
}

main>div {
  padding: 2rem 0rem 2rem 0rem;
}

section {
  padding: 0rem 2rem 0rem 2rem;
}

h2,
p:not(:last-of-type) {
  margin: auto auto 2rem auto;
}

.fixed {
  position: fixed;
  top: 0rem;
  width: 100%;
  transform: translate3d(0, 0, 0);
  /* translateZ-hack */
}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Fixed</title>

</head>

<body>

  <header>

    <div></div>

    <nav>

      <div></div>

    </nav>

  </header>

  <main>

    <div>

      <section>

        <h2>Lorem ipsum dolor</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
          Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
          Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
          Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

      </section>

    </div>

  </main>

</body>

</html>

Answer 1

我已经在chrome中测试了您的代码，您应该在init函数中添加对fixed_nav函数的调用。这样可以解决问题。

Answer 2

通过添加两个额外的事件pageshow和pagehide解决了我的问题，即使在使用重置按钮，前进/后退按钮或f5-键后文档来自缓存的情况下，也可以确保重置（固定）导航键。

var html, header, nav, navtop, verticalpos;

function fixed_nav() {

  "use strict";

  verticalpos = window.pageYOffset;

  if (verticalpos >= navtop) {

    nav.setAttribute('class', 'fixed');

  } else {

    nav.removeAttribute('class');

  }

}

function init() {

  "use strict";

  html = document.documentElement;

  header = document.getElementsByTagName('header')[0];

  nav = header.getElementsByTagName('nav')[0];

  navtop = nav.getBoundingClientRect().top;

}

window.addEventListener('load', init, false);

window.addEventListener('pageshow', function() {
  html.scrollTop = 0;
  
  navtop = nav.getBoundingClientRect().top;
  
}, false);

window.addEventListener('pagehide', function() {
  html.scrollTop = 0;
  
  nav.removeAttribute('class');
}, false);

window.addEventListener('scroll', fixed_nav, false);

* {
  padding: 0px;
  margin: 0px;
}

header {
  height: 15rem;
  background-color: lightpink;
}

nav {
  height: 5rem;
  background-color: lightblue;
}

main {
  background-color: lightsalmon;
  display: block;
  /* IE 11 */
}

div {
  max-width: 25rem;
  background-color: rgba(0, 0, 0, 0.2);
  margin: auto auto auto auto;
}

header>div {
  height: 10rem;
}

nav>div {
  height: 100%;
}

main>div {
  padding: 2rem 0rem 2rem 0rem;
}

section {
  padding: 0rem 2rem 0rem 2rem;
}

h2,
p:not(:last-of-type) {
  margin: auto auto 2rem auto;
}

.fixed {
  position: fixed;
  top: 0rem;
  width: 100%;
  transform: translate3d(0, 0, 0);
  /* translateZ-hack */
}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Fixed</title>

</head>

<body>

  <header>

    <div></div>

    <nav>

      <div></div>

    </nav>

  </header>

  <main>

    <div>

      <section>

        <h2>Lorem ipsum dolor</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
          Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
          Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
          Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>

      </section>

    </div>

  </main>

</body>

</html>

Answer 3

1）将其包含在您的html文件中 2）修复导航的位置。 3）使用媒体查询。

页面重新加载后出现固定导航问题

3 个答案: