文档章节

Problem Solved: Navigation on Scroll

Kolosek
 Kolosek
发布于 2018/07/24 16:23
字数 555
阅读 1
收藏 0

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.

© 著作权归作者所有

Kolosek
粉丝 0
博文 29
码字总数 20461
作品 0
塞尔维亚
CEO
私信 提问
Intel® RealSense™ Navigation Library Sample Code

Intel® RealSense™ Navigation Library Sample Code Intel® Developer Zone2015-08-03190 阅读 Navigationlibrary If you've used the Food Network * hands free navigation provided b......

Intel® Developer Zone
2015/08/03
0
0
27 款漂亮的网站导航的设计

今天我们跟大家分享 27 个非常漂亮而且比较独特的网站导航菜单的设计: Handle With Love Neat and organized vertical navigation. Amazing pretty pictures and colors! Weightshift Cool ...

红薯
2011/12/10
5.6K
2
27 个漂亮的 Web 导航设计例子

Handle With Love 整洁和有组织的垂直导航。惊人的漂亮图片和颜色! Weightshift 很酷的使用菜单导航,优雅! Don’t throw Batteries 优雅整洁的菜单 FA Design Another great example of t...

小编辑
2011/10/14
11.7K
7
坑爹属性之【automaticallyAdjustsScrollViewInsets】

The default value of this property is YES, which allows the view controller to adjust its scroll view insets in response to the screen areas consumed by the status bar, navigati......

FTD_SL
2016/04/09
36
0
Lightbox-ish modified Thickbox

This is based on Cody Lindley's Thickbox plugin. I wanted the "Previous" and "Next" navigation of lightbox, but without all the fancy animation and image resizing. I also wanted......

匿名
2008/09/19
835
0

没有更多内容

加载失败,请刷新页面

加载更多

360常用小工具分享 独立版 360驱动网卡版

有些朋友为了修复断网或者修复LSP,都会选择去下载360,用完再删除有些麻烦。所以自己收集了18个实用小工具独立版本方便坛友使用。只做分享,不喜勿喷。 360驱动网卡版:链接: https://pan.b...

xiaogg
4分钟前
1
0
批量删除表中某字段

select * from information_schema.columns where table_schema='erp-zyjsgx-v2' and column_name='manageflag'; alter table jz_xiangmudj drop column manageflag;......

glen_xu
6分钟前
1
0
JavaScript面试题总结系列(八)

8. JavaScript - this对象 this对象 this总是指向函数的直接调用者(而非间接调用者) 如果有new关键字,this指向new出来的那个对象 在事件中,this指向触发这个事件的对象,特殊的是,IE中的...

张森ZS
8分钟前
2
0
Apache Camel Spring Boot

Camel应用初始化 Apache Camel 采用的是组件化的设计思想,通过Camel Component对接第三方的应用,Camel核心模块会扫描classpath 加载这些Camel Component。 Camel应用在启动的过程中,需要将...

WillemJiang
10分钟前
2
0
数据管理必看!Kendo UI for jQuery过滤器状态保持

Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue......

FILA6666
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部