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, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial