အားလုံး မျှ အားဖြင့် အောက်သို့ အားလုံး မျှ ပြောင်းလဲခြင်း ဖွဲ့စည်းခြင်း

နေ့ရဲများ အောက်သို့ အားလုံး မျှ ပြောင်းလဲခြင်း

သတ်မှတ် ပုံစံ ၁ - ဂျပန်ဘားလုပ်

နေ့ရဲများ ဖွဲ့စည်းခြင်း

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

သတ်မှတ် ပုံစံ ၂ - ဂျပန်ဘားလုပ်

နေ့ရဲများ ဘားလုပ် ပြောင်းလဲခြင်း

#navbar {
  background-color: #333; /* ရောင်သုံး အရောင် အောက်ဆုံး */
  position: fixed; /* အားလုံး မျှ အပြင် အားလုံး မျှ ပြုလုပ်ပြီ */
  top: -50px; /* အထိပ်ပိုင်း အားလုံး မျှ အကွာအဝေး ၅၀ပေါ် ပြောင်းလဲပြီး အထိပ်ပိုင်းအပြင် အားလုံး မျှ ပိတ်ပြီ */
  width: 100%; /* အကွာအဝေး ၁၀၀% */
  transition: top 0.3s; /* အောက်(အထိပ်) သို့ ပြောင်းလဲခြင်း အဆင့် */
}
/* နေ့ရဲများ ဘားလုပ် ပြောင်းလဲခြင်း */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}

သတ်မှတ် ပုံစံ ၃ - ဂျပန်ဘားလုပ်

// သူ့ကိုယ်စားပုံစံကို အထိပ်ပိုင်းမှ တစ်ဆယ့် ၂၀ ပြီး အားလုံး မျှ အားဖြင့် ပြောင်းလဲပြီ
// သူ့ကိုယ်စားပုံစံကို စ်ပြီးတော့ အထိပ်ပိုင်းသို့ အမြင့် အားလုံး မျှ အားဖြင့် ပြောင်းလဲပြီး အထိပ်ပိုင်း 50px အကွာအဝေးဖြင့် ပြောင်းလဲပြီ
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
}

亲自试一试