javascript - menu 隨著scroll高度跳出

Question

{代码...} 假設我有一個menu如何當捲軸往下移動時menu能夠fixed在最上面？ 我現在的做法是有兩個menu div當一開始進入時顯示A menu當往下滑時顯示B menu {代码...} 就是：https://santatracker.google.c...進入這...

PHP中文网 · Answer

能看出來你給的頁面中的header確實是只有一個並且用了fixed定位，同時是通過修改樣式來做的。
然後選中header可以看到Event listeners中有window的scroll,說明是放在window的滾動事件中做了處理。
修改的樣式有box-shadow、background等樣式，由於使用了CSS变量,所以不太好找頁面修改的具體的值。

所以我只能儘量用找到的樣式來寫一個demo，重點還是一個transition屬性。也許你將背景的改變當成了兩個header的顯示隱藏效果了。

* {
    margin: 0;
    padding: 0;
}
            
body {
    height: 2000px;
    background: skyblue;
}
            
#header {
    height: 50px;
    /*transparent爲背景透明*/
    background: transparent;
    border-bottom: 1px #666 solid;
    transition: all .5s;
    position: fixed;
    width: 100%;
}
            
#header.show {
    background: #30cbec;
    border: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 5px 6px -3px rgba(0, 0, 0, .4);
}


    
            I'm Header

$(document).ready(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() > 1) {
            $("#header").addClass("show");
        } else if($(this).scrollTop() < 1) {
            $("#header").removeClass("show");
        }
    });
});

阿神 · Answer

没看懂你的描述，你不能直接给你的menu设置fixed？让给你的body设置一个padding-top:和你的menu高度一样

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket