简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

javascript - menu 隨著scroll高度跳出

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

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

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

我現在的做法是有兩個menu p
當一開始進入時顯示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就可以做到這個效果呢？？

高洛峰高洛峰2770 hari yang lalu621

membalas semua(2)saya akan balas

  • PHP中文网

    PHP中文网2017-04-11 11:40:15

    能看出來你給的頁面中的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>
    <p id="header">
            I'm Header
    </p>
</body>
    $(document).ready(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() > 1) {
            $("#header").addClass("show");
        } else if($(this).scrollTop() < 1) {
            $("#header").removeClass("show");
        }
    });
});

    balas
    0
  • 阿神

    阿神2017-04-11 11:40:15

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

    balas
    0
  • Batalbalas