Проблема с исправленной навигацией после перезагрузки страницы - PullRequest
Новая
       22

Проблема с исправленной навигацией после перезагрузки страницы

0 голосов
/ 01 октября 2018

В моем примере навигация - встроенная в заголовок - должна быть исправлена ​​в верхней части окна браузера, если документ был прокручен на определенную величину.

Эквивалентный скрипт работает до сих пор, но показываетСледующая проблема в 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>

Ответы [ 3 ]

0 голосов
/ 01 октября 2018

1) Включите его в ваш HTML-файл 2) Исправьте положение навигации.3) использовать медиазапросы.

0 голосов
/ 06 октября 2018

Решил мою проблему, добавив два дополнительных события pagehow и 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>
0 голосов
/ 01 октября 2018

Я проверил ваш код в chrome, вы должны добавить вызов функции fixed_nav внутри вашей функции init.Это исправит заднюю проблему.

...