When I refresh a page the absolte positioned element isn't hidden in my layout. Why?
Question
I have implemented a sidebar. When I click the hamburger menu in the <header> the sidebar appears. And I can close it too. Ok , it's works. However I noticed a strange behavior: open the sidebar, leave it opened and refresh the page (F5). The sidebar is still there nevertheless the .invisible-side-bar is applied. This class should take away the sidebar to the right (that is absolute positioned) and it hides the sidebar behind the layout. But when I press F5 for refresh, the class is applied but everything remains the same as before refreshing. Why this stange behavior? Sorry if in the snippet some image (close icon and hamburger icon) could be missing.
EDIT: This strange behavior is in Google Chroome browser,instead in Mozilla Firefox seems all right.
//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>
2 answers
solution1
1 ACCPTED 2020-11-19 01:40:02
The issue is how (position: fixed) behaves.
When you have an element with position: fixed the browser remembers the scroll position even after refresh.
When, you click the menu button the sidebar appears and after refresh it appears to stay there instead of hiding again. The thing is it is hiding itself again but the problem is because of position: fixed the browser is remembering its scroll-x position and this is why you can still see the sidebar even though it is hidden again.
After refresh you can inspect the website and remove overflow-x from the body and you can see that browser is scrolled to the end and this is why you can see the sidebar even after the refresh.
Quick solution can be not using position: fixed .
solution2
0 2020-11-19 12:29:47
I resolved the problem on my own. To move the sidebar I used the width property instead of right or transition and now it's all right. However I still can't understand why the original code doesn't work.
//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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.