当我刷新页面时，绝对定位元素没有隐藏在我的布局中。为什么？

Question

我实现了侧边栏。当我单击 <header> 中的汉堡菜单时，边栏出现。我也可以关闭它。好的，它的作品。但是我注意到一个奇怪的行为：打开边栏，保持打开状态并刷新页面 (F5)。尽管应用了 .invisible-side-bar，侧边栏仍然存在。这个 class 应该去掉右侧的侧边栏（绝对定位），并将侧边栏隐藏在布局后面。但是当我按 F5 进行刷新时，应用了 class 但一切都与刷新前相同。为什么会有这种奇怪的行为？很抱歉，如果在片段中某些图像（关闭图标和汉堡包图标）可能丢失。

编辑：这种奇怪的行为在 Google Chrome 浏览器中，而不是在 Mozilla Firefox 中似乎没问题。

//Il click del mouse si può fare anche con css pure con :target

document.addEventListener("DOMContentLoaded",domCaricato);

function domCaricato(){
   let sideBar = document.querySelector('nav#sidebar');
   let hamburgerMenu = document.querySelector('#header .hamburger-menu');
   let sideBarX       = document.querySelector('nav#sidebar .close-sidebar');
   hamburgerMenu.onclick = apriSideMenu;
   sideBarX.onclick=closeSideMenu;

   function apriSideMenu(){
      sideBar.className = 'visible-side-bar';
   }

   function closeSideMenu(){
         sideBar.className = 'invisible-side-bar';
   }
}

html,body,ul,li{
   margin:0;
   padding:0;
}

ul,li{
   list-style-type: none;
}

a{
   text-decoration:none;
}

*{
   box-sizing: border-box;
}

body{
   background:whitesmoke;
   overflow-x:hidden; /*necessario a causa del sidebarmenu che va oltre la pagina ANdrebbe messo anche al tag html*/
}

#header{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   line-height:4em; /*Non dare la line-height in em. QUi la lascio così per semplicità*/
   background: url('https://ngrome.io/assets/logo/logo-horizontal.svg') no-repeat 2% center;
   background-color: #ffffff;
}

#header .hamburger-menu{
   float:right;
   width:4em;
   background-color:#ef3f3f;
   background-image:url('../../multimedia/img/white-hamburger-2.svg');
   background-repeat:no-repeat;
   background-position: center center; 
}

/*Necessario altrimenti il link saraà vuoto e non si vedrà*/
.empty-link{
   visibility:hidden;
}

nav#sidebar:after{
   content:"";
   clear:both;
   display:block;
}

nav#sidebar{
   position:absolute;
   top:0;
   background:#ef3f3f;
   width:30%;
   height:100%;
   height:100vh;
   transition: right ease-in 0.2s;
   /*La transizione su block non funziona. Ecco perchè ho usato right*/
}

.invisible-side-bar{
   right:-30%;
}
.visible-side-bar{
   right:0;
}

nav#sidebar li:first-of-type{
   margin-top:3em;
}

nav#sidebar li{
   text-align:center;
}

nav#sidebar li a{
   font-size:1.5em;
   color:#ffffff;
   display:block;
   padding:0.8em;
}

nav#sidebar a.close-sidebar{
   float:right;
   width:4em;
   margin-right:0.5em;
   margin-top:0.5em;
   padding:0.5em 0;
   text-align:center;
}

<!DOCTYPE html>
<html lang="it">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sidebar Sito Angular Rome.io</title>

   <link rel="stylesheet" href="../css/sideBarAngular.css">
   <script src="../js/sideBarAngular.js" defer></script>
</head>

<body>
   <!-- span Necessario altrimenti il link sarà vuoto e non si vedrà -->
   <!-- Per accessibilità essendo un link vuoto è necessario anche mettere
   l aria-label -->
  <header id="header">
     <a href="#" class="hamburger-menu" aria-label="apri-menu"><span class="empty-link">Menu</span></a>
   </header>

   

   <nav id="sidebar" class="invisible-side-bar">
      <a href="#" class="close-sidebar" id="mio" aria-label="chiudi-menu"><svg width="21" height="21"><g fill="#FFF" fill-rule="evenodd"><path d="M.368 18.717L18.753.332l1.414 1.415L1.782 20.13z"></path><path d="M1.782.869l18.385 18.384-1.414 1.415L.368 2.283z"></path></g></svg></a>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>

  </header> 
</body>
</html>

Answer 1

问题是 (position: fixed) 的行为方式。

当你有一个带有 position: fixed 的元素时，浏览器即使在刷新后也会记住滚动位置。

当您单击菜单按钮时，侧边栏出现，刷新后它似乎停留在那里而不是再次隐藏。问题是它再次隐藏了自己，但问题是因为 position: fixed 浏览器记住了它的 scroll-x 位置，这就是为什么你仍然可以看到侧边栏，即使它再次被隐藏。

刷新后您可以检查网站并从正文中删除 overflow-x，您可以看到浏览器滚动到末尾，这就是为什么即使在刷新后您也可以看到侧边栏的原因。

快速解决方案可以不使用 position: fixed。

Answer 2

我自己解决了这个问题。为了移动侧边栏，我使用了 width 属性而不是 right 或 transition 现在可以了。但是我仍然不明白为什么原始代码不起作用。

//Il click del mouse si può fare anche con css con :target

document.addEventListener("DOMContentLoaded",domCaricato); //c'è defer, non sarebbe necessario

function domCaricato(){
   let sideBar = document.querySelector('nav#sidebar');
   let hamburgerMenu = document.querySelector('#header .hamburger-menu');
   let sideBarX       = document.querySelector('nav#sidebar .close-sidebar');
   hamburgerMenu.onclick = apriChiudiSideMenu;
   sideBarX.onclick=apriChiudiSideMenu;

   function apriChiudiSideMenu(){
      sideBar.classList.toggle('visible-side-bar');
   }

}

html,body,ul,li{
   margin:0;
   padding:0;
}

ul,li{
   list-style-type: none;
}

a{
   text-decoration:none;
}

*{
   box-sizing: border-box;
}

body{
   background:whitesmoke;
   overflow-x:hidden; /*necessario a causa del sidebarmenu che va oltre la pagina ANdrebbe messo anche al tag html*/
}

#header{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   line-height:4em; /*Non dare la line-height in em. QUi la lascio così per semplicità*/
   background: url('https://ngrome.io/assets/logo/logo-horizontal.svg') no-repeat 2% center;
   background-color: #ffffff;
}

#header .hamburger-menu{
   float:right;
   width:4em;
   background-color:#ef3f3f;
   background-image:url('../../multimedia/img/white-hamburger-2.svg');
   background-repeat:no-repeat;
   background-position: center center; 
}

/*Necessario altrimenti il link saraà vuoto e non si vedrà*/
.empty-link{
   visibility:hidden;
}

nav#sidebar:after{
   content:"";
   clear:both;
   display:block;
}

nav#sidebar{
   width:0;
   font-size:0;
   position:absolute;
   top:0;
   right:0;
   background:#ef3f3f;
   height:100%;
   height:100vh;
   transition: width ease-in 0.2s;
   /*La transizione su block non funziona. Ecco perchè ho usato right*/
}


nav#sidebar.visible-side-bar{
   width:30%;
   font-size:inherit;
}

nav#sidebar li:first-of-type{
   margin-top:3em;
}

nav#sidebar li{
   text-align:center;
}

nav#sidebar li a{
   font-size:1.5em;
   color:#ffffff;
   display:block;
   padding:0.8em;
}

nav#sidebar a.close-sidebar{
   
   float:right;
   width:4em;
   margin-right:0.5em;
   margin-top:0.5em;
   padding:0.5em 0;
   text-align:center;
}

<!DOCTYPE html>
<html lang="it">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sidebar Sito Angular Rome.io</title>

   <link rel="stylesheet" href="../css/prova.css">
   <script src="../js/prova.js" defer></script>
</head>

<body>
   <!-- span Necessario altrimenti il link sarà vuoto e non si vedrà -->
   <!-- Per accessibilità essendo un link vuoto è necessario anche mettere
   l aria-label -->
  <header id="header">
     <a href="#" class="hamburger-menu" aria-label="apri-menu"><span class="empty-link">Menu</span></a>
   </header>

   

   <nav id="sidebar" >
      <a href="#" class="close-sidebar" id="mio" aria-label="chiudi-menu"><svg width="21" height="21"><g fill="#FFF" fill-rule="evenodd"><path d="M.368 18.717L18.753.332l1.414 1.415L1.782 20.13z"></path><path d="M1.782.869l18.385 18.384-1.414 1.415L.368 2.283z"></path></g></svg></a>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>

  </header> 
</body>
</html>

当我刷新页面时，绝对定位元素没有隐藏在我的布局中。为什么？

When I refresh a page the absolte positioned element isn't hidden in my layout. Why?

html

javascript

css

html-rendering

page-refresh