Problem Solved: Navigation on Scroll

A challenge we recently faced was that we needed to create a navigation that shows only when scrolling up.

How did we solve it?

Well, firstly, the HTML for the form was created. Keep in mind that while creating the form, Bootstrap was used. Here we have solved the problem using CSS and JQuery.

Some of the useful CSS properties that should be learned are relative font size, columns, relative and absolute positioning. Now, let's move on.

Then, we created the static navigation and the navigation that should appear on scroll up.

<nav class="main-navigation navbar navbar-expand-lg">
  <a class="navbar-brand" href="/"></a>
  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current) </span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">First link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Second link</a>
      </li>
    </ul>
  </div>
</nav>

We created two identical navigations, one beneath the other. The difference was: one should appear when scrolling up and have a different background, while the other should remain static at the top of the page.

In order to do this, these navigations had to have different identifiers.

The navigation that appears on scroll had a class ".navigation-bar-scroll", while the static navigation had a class with a different name so that the styles won't get mixed.

We used the following SCSS for the navigation that appears on the scroll:

.navigation-bar-scroll {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  
  &.is-hidden {
    opacity: 0;
    -webkit-transform: translate(0,-60px);
    transition: .5s ease;
  }
  
  &.is-visible {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transition: .5s ease;
  }
}

Then, we used the following JQuery code to implement the "show on scroll up" functionality.


   var previousScroll = 0;

   $(window).scroll(function(){

     var currentScroll = $(this).scrollTop();
     
     if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){

       if (currentScroll > previousScroll){
         window.setTimeout(hideNav, 300);

       } else if (currentScroll == previousScroll) {
         window.setTimeout(visibleNav, 300);
       }
        else {
         window.setTimeout(showNav, 300);
       }
  
       previousScroll = currentScroll;
     }
     
     /* make the scroll navigation disappear when it is scrolled on top */

     if ($(window).scrollTop() <= 150) {
         $('#navigation-scroll').css('display', 'none');
     } else {
       $('#navigation-scroll').css('display', 'flex');
     }

   });

   function hideNav() {
     $(".main-navigation-scroll").removeClass("is-visible").addClass("is-hidden");
   }
   function showNav() {
     $(".main-navigation-scroll").removeClass("is-hidden").addClass("is-visible");
     $(".main-navigation-scroll").addClass("shadow");
   }

 });

We have achieved the effect of a navigation appearing when scrolling up. This navigation bar will disappear when the scrolling reaches the top, while the second static navigation will be located at the top of the page. Looks pretty cool, doesn't it?

Here's our final tip: navigations should be identical so users don't get confused. The only difference you can add is a different background color for the navigation that appears on scroll up, so the links of the navigation stay clearly visible on the page with a lot of content.

This is just one of the many ways you could improve the design of your website.

Hope you found this short blog post helpful!

Thank you for reading! :)

This post is orignally published at Kolosek Blog.

转载于:https://my.oschina.net/u/3772078/blog/1862247

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值