Sticky One Page Scroll Navigation jQuery CSS3 - Download Sticky One Page Scroll Navigation With jQuery And CSS3

Download Sticky One Page Scroll Navigation With jQuery And CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Sticky One Page Scroll Navigation With jQuery And CSS3, hope it will help you in programming stack.

Sticky One Page Scroll Navigation jQuery CSS3 - Download Sticky One Page Scroll Navigation With jQuery And CSS3
File Size: 2.97 KB
Views Total: 13785
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Makes use of jQuery, CSS3 animations and flexbox model to create a sticky top navigation for your one page scroll websites, with support for scrollspy and smooth scroll.

How to use it:

1. Add sliding content to your one page scroll website as this:

view source
01 <main class="spa-main">
02   <section class="spa-slide" id="tab-1">
03     <h1>Section 1</h1>
04     <h3>This is section 1</h3>
05   </section>
06   <section class="spa-slide" id="tab-2">
07     <h1>Section 2</h1>
08     <h3>This is section 2</h3>
09   </section>
10   <section class="spa-slide" id="tab-3">
11     <h1>Section 3</h1>
12     <h3>This is section 3</h3>
13   </section>
14   ...
15 </main>

2. Create a navigation for the sliding content.

view source
1 <section class="sticky-nav-tabs">
2   <h1>Sticky <a href="https://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a></h1>
3   <div class="sticky-nav-tabs-container">
4     <a class="sticky-nav-tab" href="#tab-1">Section 1</a>
5     <a class="sticky-nav-tab" href="#tab-2">Section 2</a>
6     <a class="sticky-nav-tab" href="#tab-3">Section 3</a>
7     <span class="sticky-nav-tab-slider"></span>
8   </div>
9 </section>

3. The required CSS/CSS3 styles for the sticky top navigation.

view source
001 .sticky-nav-tabs, .spa-slide {
002   display: -webkit-box;
003   display: -ms-flexbox;
004   display: flex;
005   -webkit-box-orient: vertical;
006   -webkit-box-direction: normal;
007   -ms-flex-direction: column;
008   flex-direction: column;
009   -webkit-box-pack: center;
010   -ms-flex-pack: center;
011   justify-content: center;
012   -webkit-box-align: center;
013   -ms-flex-align: center;
014   align-items: center;
015   height: 100vh;
016   position: relative;
017   background: #eee;
018   text-align: center;
019   padding: 0 2em;
020 }
021  
022 .sticky-nav-tabs h1, .spa-slide h1 {
023   font-size: 2rem;
024   margin: 0;
025   letter-spacing: 1rem;
026 }
027  
028 .sticky-nav-tabs h3, .spa-slide h3 {
029   font-size: 1rem;
030   letter-spacing: 0.3rem;
031   opacity: 0.6;
032 }
033  
034 .sticky-nav-tabs-container {
035   display: -webkit-box;
036   display: -ms-flexbox;
037   display: flex;
038   -webkit-box-orient: horizontal;
039   -webkit-box-direction: normal;
040   -ms-flex-direction: row;
041   flex-direction: row;
042   position: absolute;
043   bottom: 0;
044   width: 100%;
045   height: 75px;
046   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
047   background: #fff;
048   z-index: 1;
049   -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
050   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
051 }
052  
053 .sticky-nav-tabs-container--top-first {
054   position: fixed;
055   top: 75px;
056   -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
057   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
058 }
059  
060 .sticky-nav-tabs-container--top-second {
061   position: fixed;
062   top: 0;
063 source : jqueryscript.net

Related posts: