html Philip Benton编写的CodePen。向上滚动导航栏显示 - 导航栏固定在浏览器顶部,隐藏在滚动下方

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Philip Benton编写的CodePen。向上滚动导航栏显示 - 导航栏固定在浏览器顶部,隐藏在滚动下方相关的知识,希望对你有一定的参考价值。

@import "compass";
.navigation-bar {
  background-color: GhostWhite;
  border: 1px solid Gainsboro;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  
  &.is-hidden {
    opacity: 0;
    -webkit-transform: translate(0,-60px);
    -webkit-transition: -webkit-transform .2s,background .3s,color .3s,opacity 0 .3s;
  }
  
  &.is-visible {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -webkit-transition: -webkit-transform .2s,background .3s,color .3s;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;
      padding: 1em;
    }
  }
}


.content {
  min-height: 1200px; 
}
$(document).ready(function(){

/** ===========================================
    Hide / show the master navigation menu
============================================ */

  console.log('Window Height is: ' + $(window).height());
  console.log('Document Height is: ' + $(document).height());

  var previousScroll = 0;

  $(window).scroll(function(){

    var currentScroll = $(this).scrollTop();

    /*
      If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.
    */
    if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){
      /*
        If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav.
      */
      if (currentScroll > previousScroll){
        window.setTimeout(hideNav, 300);
      /*
        Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
      */
      } else {
        window.setTimeout(showNav, 300);
      }
      /* 
        Set the previous scroll value equal to the current scroll.
      */
      previousScroll = currentScroll;
    }

  });

  function hideNav() {
    $("[data-nav-status='toggle']").removeClass("is-visible").addClass("is-hidden");
  }
  function showNav() {
    $("[data-nav-status='toggle']").removeClass("is-hidden").addClass("is-visible");
  }

});
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    
    <nav class="navigation-bar is-visible" data-nav-status="toggle">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Blog</li>
        <li>Contact</li>
      </ul>
    </nav>
    
    <section class="content"></section>
  </body>
</html>

以上是关于html Philip Benton编写的CodePen。向上滚动导航栏显示 - 导航栏固定在浏览器顶部,隐藏在滚动下方的主要内容,如果未能解决你的问题,请参考以下文章

Chi-Wing FU, Philip

Windows Shell Code编写中级拔高

VS Code配置snippets代码片段快速生成html模板,提高前端编写效率

VS Code python初体验笔记

python-code-12

关于Django模板的JSON