Skip to content

Instantly share code, notes, and snippets.

@Catevika

Catevika/Navbar: Hide on Scroll and Show at Scroll position

Last active March 16, 2023 11:17
Show Gist options
  • Save Catevika/6237236bccee726c3d333147272d2154 to your computer and use it in GitHub Desktop.
Save Catevika/6237236bccee726c3d333147272d2154 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Catevika revised this gist Mar 16, 2023. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion Navbar: Hide on Scroll and Show at Scroll position
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,14 @@
    /*=====================================================
    = Navbar: Hide on Scroll and Show at Scroll position =
    =====================================================*/
    const navbar = document.querySelector('nav');

    let lastScrollTop;

    window.addEventListener('scroll', function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
    navbar.style.top = '-75px';
    navbar.style.top = '-75px'; /* height of the navbar */
    }
    else {
    navbar.style.top = '0';
  2. Catevika created this gist Mar 16, 2023.
    15 changes: 15 additions & 0 deletions Navbar: Hide on Scroll and Show at Scroll position
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    /*=====================================================
    = Navbar: Hide on Scroll and Show at Scroll position =
    =====================================================*/
    let lastScrollTop;

    window.addEventListener('scroll', function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
    navbar.style.top = '-75px';
    }
    else {
    navbar.style.top = '0';
    }
    lastScrollTop = scrollTop;
    });