Get In Touch
541 Melville Ave, Palo Alto, CA 94301,
[email protected]
Ph: +1.831.705.5448
Work Inquiries
[email protected]
Ph: +1.831.306.6725

Fixed Top Navigation

Smart Fixed Top Navigation In Pure JavaScript

Description:
ฟิกเมนูไว้ด้านบนสุดของจอ เมื่อเลื่อนเมาส์ลงมา เมนูที่ฟิกไว้จะหายไป แต่เมื่อ เลื่อนเมาส์ขึ้น เมนูของคุณจะโผล่ขึ้นมาอีกครั้ง

How to use it:

1.สร้าง HTML Code ขึ้นมาตามข้อมูลข้างล่าง

<header class="header-navigation" id="header">
  <nav>
    <a class="link" href="#" title="Home">Home</a>
    <a class="link" href="#" title="About">About</a>
    <a class="link" href="#" title="Contact">Contact</a>
  </nav>
</header>

2.นำ CSS ด้านล่าง ใส่ไว้ในไฟล์ CSS ของคุณ

.header-navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #333;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.slideUp {
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  transition: transform .5s ease-out;
}
.slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform .5s ease-out;
}

3.นำ Javascript ด้านล่าง ใส่ไว้ในไฟล์ Javascript ของคุณ

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");

window.addEventListener('scroll', function(e) {
  last_scroll_position = window.scrollY;

  // Scrolling down
  if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
    // header.removeClass('slideDown').addClass('slideUp');
    header.classList.remove("slideDown");
    header.classList.add("slideUp");

  // Scrolling up
  } else if (new_scroll_position > last_scroll_position) {
    // header.removeClass('slideUp').addClass('slideDown');
    header.classList.remove("slideUp");
    header.classList.add("slideDown");
  }

  new_scroll_position = last_scroll_position;
});

Credit + Download : https://www.cssscript.com/smart-fixed-top-navigation-pure-javascript/

© 2020, by @Devvv.
Let it go! <3
We use cookies to give you the best experience.