Forum : problème de scroll en suivant le TP menu collant

Bonjour,

Je suis le TP du menu collant, mais je n'arrive pas à trouver d'ou viens l'erreur,
quand je redimensionne ma fenêtre l'ascenceur de scroll s'en va tout en bas au lieu de rester sur place.
voilà le code (qui est quasi le même que dans le tuto) :

le html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Collant</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="topBar">
        LOGO
    </div>

    <div class="menu">
            <a href="#">Item 1</a><!-- 
         --><a href="#">Item 2</a><!-- 
         --><a href="#">Item 3</a><!-- 
         --><a href="#">Item 4</a><!-- 
         --><a href="#">Item 5</a>
    </div>

    <div class="article" style="height : 4400px">
        Texte
    </div>

    <script src="script.js"></script>
</body>
</html>

le css :

/* CSS Style */
*{
    box-sizing: border-box;
}
.topBar{
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    padding-left: 0 60px;
    font-weight: bold;
    border-bottom: 1px solid #bababa;
}
.menu{
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    display: flex;
    z-index: 10;
}
.menu a{
    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    color: #505050;
    border-right: 1px solid #bababa;
}
.menu a:hover{
    background-color: #EEEEEE;
}

/* CSS menu collant */
.fixed{
    position: fixed;
    top: 0;
}

le javascript

(function(){

    var scrollY = function () {
        var supportPageOffset = window.pageXOffset !== undefined;
        var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
        return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
    }

    var element = document.querySelector('.menu')
    var rect = element.getBoundingClientRect() 
    var top = rect.top + scrollY()
    var fakeElement = document.createElement('div')
    fakeElement.className = 'fake'
    fakeElement.style.width = rect.width + 'px'
    fakeElement.style.height = rect.height + 'px'

    var onScroll = function () {  
        var hasScrollClass = element.classList.contains('fixed')
        if (scrollY() > top && !hasScrollClass) {
            element.classList.add('fixed')
            element.style.width = rect.width + 'px'
            element.parentNode.insertBefore(fakeElement, element)
        }
        else if (scrollY() < top && hasScrollClass) {
            element.classList.remove('fixed')
            element.parentNode.removeChild(fakeElement)
        }
    }

    var onResize = function () {
        element.style.width = 'auto'
        element.classList.remove('fixed')
        fakeElement.style.display = 'none'
        rect = element.getBoundingClientRect()
        top = rect.top + scrollY()
        fakeElement.style.width = rect.width + 'px'
        fakeElement.style.height = rect.height + 'px'
        fakeElement.style.display = 'block'
        onScroll()
    }

    window.addEventListener('scroll', onScroll)

    window.addEventListener('resize', onResize)

})()

est-ce quelqu'un aurrait une idée ?
P.S : y'a plus de Discord Graphikart ?

problème de scroll en suivant le TP menu collant

1 réponse