menu 隨著scroll高度跳出

<div id="A" class="menu">
</div>

<div id="B" class="menu">
這個menu先display none
</div>

假設我有一個menu
如何當捲軸往下移動時
menu能夠fixed在最上面？

我現在的做法是有兩個menu div
當一開始進入時顯示A menu
當往下滑時顯示B menu

$(document).ready(function(){
  $(window).scroll(function(){

    if($(this).scrollTop()>1)
    {
      $("#B").fadeIn();
    }
    else if($(this).scrollTop()<1)
    {
      $("#B").fadeOut();
    }
    });
});

就是：
https://santatracker.google.c...
進入這個網頁後
往下滑動，上面的menu會出現且fixed
不過我必須要做兩個menu才可以實現這個效果
如何在「同一個」menu就可以做到這個效果呢？？

阅读 2.8k

能看出來你給的頁面中的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);
}

<body>
    <div id="header">
            I'm Header
    </div>
</body>

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

menu 隨著scroll高度跳出

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？