Bonjour,
Je suis en ce moment le cours "Apprendre le Javascript: chapitre 16, TP: Menu collant" sur YT. Malheureusement à l'étape du "resize" ça ne marche pas comme prévu alors que je pense avoir tout fait pareil sauf au niveau de l'html/css. Quand je redimensionne ma page, elle commence à scroller automatiquement vers le bas et le resize ne marche pas très bien.
Merci d'avance pour votre aide !
Code HTML
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="topbar">
Logo
</div>
<div class="menu">
<div><a href="#">Item</a></div>
<div><a href="#">Item</a></div>
<div><a href="#">Item</a></div>
<div><a href="#">Item</a></div>
<div><a href="#">Item</a><div class="submenu">
<div><a href="#">Choix</a></div>
<div><a href="#">Choix</a></div>
<div><a href="#">Choix</a></div>
</div></div>
</div>
</div>
<div style="height: 4400px">
Du Texte <br>
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint doloribus architecto dignissimos unde possimus impedit explicabo, minus voluptatem eum labore culpa a mollitia deleniti aspernatur et earum dolorem magnam.
</div>
<script src="script.js"></script>
</body>
</html>
Code CSS
*{
box-sizing: border-box;
}
body{
padding: 15px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a{
text-decoration: none;
background: white;
}
.topbar{
border: solid 1px gray;
padding: 15px;
font-weight: bold;
}
.menu{
display: flex;
border: solid 1px gray;
border-top: none;
background: white;
}
.header{
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.13);
}
.menu > div{
border-right: 1px solid gray;
}
.menu > div > a{
display: block;
padding: 10px;
font-size: 1.5em;
}
.menu > div > a:hover{
background: lightsteelblue;
color: white;
}
.submenu{
display: none;
}
.submenu a{
display: block;
width:100%;
height: 47.2px;
border: 1px solid gray;
border-top: none;
text-align: center;
line-height: 47.2px;
}
.submenu a:hover{
background: lightsteelblue;
color: white;
}
.menu > div:hover .submenu{
display: block;
position: absolute;
z-index: 100;
width: 68.69px;
margin-left:-1px;
}
.fixed{
position: fixed;
top: 0;
}
Code JS
(function (){
/*When we scroll
add class fixed to the menu
*/
let scrollY = function () {
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
}
//var
let element = document.querySelector(".menu")
let rect = element.getBoundingClientRect()
let top = rect.top + scrollY()
let width = rect.width
let fake = document.createElement("div")
//changing the size of the fake element
fake.style.width = rect.width + "px"
fake.style.height = rect.height + "px"
//
//Functions
let onScroll = function() {
let hasScrollClass = element.classList.contains("fixed")
//check if has fixed class and add or remove fixed
if(scrollY() > top && !hasScrollClass){
//add fixed
element.classList.add("fixed")
//add width
element.style.width = width + "px"
//add fake element
element.parentNode.insertBefore(fake, element)
} else if(scrollY() < top && hasScrollClass) {
element.classList.remove("fixed")
element.parentNode.removeChild(fake)
}
}
//
let onResize = function () {
element.style.width = "auto"
element.classList.remove("fixed")
fake.style.display = "none"
rect = element.getBoundingClientRect()
top = rect.top + scrollY()
fake.style.width = rect.width + "px"
fake.style.height = rect.height + "px"
fake.style.display = "block"
onScroll()
}
//events listener
//add event on scroll
window.addEventListener("scroll", onScroll)
window.addEventListener("resize", onResize)
})()