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, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket