Show Nav On Scroll

Developer
Alex Bergin
Size
4,898 Kb
Views
89,056
  1. Show Nav On Scroll Previews
  2. Show Nav On Scroll HTML Codes
  3. Show Nav On Scroll CSS Codes
  4. Show Nav On Scroll JS Codes

How do I make an show nav on scroll?

Uses fixed & relative positioning with z-indexes to reveal the nav bar after you scroll past a cover element. This demo also uses a mixin for creating responsive layouts found here: http://codepen.io/abergin/pen/WvOWdx/. What is a show nav on scroll? How do you make a show nav on scroll? This script and codes were developed by Alex Bergin on 13 June 2022, Monday.

Show Nav On Scroll Previews
IQ Test

Show Nav On Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Show Nav On Scroll</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/vlzwpb.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Titillium+Web:300,700,300italic'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <nav> <a href="#cover"><h3>Cover</h3></a> <a href="#section-one"><h3>One</h3></a> <a href="#section-two"><h3>Two</h3></a> <a href="#section-three"><h3>Three</h3></a> </nav> <section id="cover" class="cover"> <h1>Cover</h1> <p>Scroll</p> </section> <section id="section-one" class="content"> <div> <h2>Section One</h2> <img src="http://placekitten.com/1280/600" /> <p>Dolorem rerum et aspernatur inventore quasi et quod doloremque exercitationem sunt adipiscing facilis possimus minus labore exercitationem aspernatur ipsam voluptatibus excepturi nihil! Voluptatem dolores id accusantium temporibus assumenda et atque unde consectetur fugit sit qui voluptas fugit dolore nihil quidem tempore consequuntur similique reprehenderit et rerum. Velit corporis consequatur nesciunt est corporis et qui quod. Recusandae qui consequatur itaque inventore hic molestiae labore dolores rerum veniam culpa dolorem velit in molestiae voluptatem. Non sed quod animi excepturi sapiente obcaecati quod.</p> </div> </section> <section id="section-two" class="content"> <div> <h2>Section Two</h2> <img src="http://placekitten.com/1180/500" /> <p>Dolorem rerum et aspernatur inventore quasi et quod doloremque exercitationem sunt adipiscing facilis possimus minus labore exercitationem aspernatur ipsam voluptatibus excepturi nihil! Voluptatem dolores id accusantium temporibus assumenda et atque unde consectetur fugit sit qui voluptas fugit dolore nihil quidem tempore consequuntur similique reprehenderit et rerum. Velit corporis consequatur nesciunt est corporis et qui quod. Recusandae qui consequatur itaque inventore hic molestiae labore dolores rerum veniam culpa dolorem velit in molestiae voluptatem. Non sed quod animi excepturi sapiente obcaecati quod.</p> </div> </section> <section id="section-three" class="content"> <div> <h2>Section Three</h2> <img src="http://placekitten.com/980/450" /> <p>Dolorem rerum et aspernatur inventore quasi et quod doloremque exercitationem sunt adipiscing facilis possimus minus labore exercitationem aspernatur ipsam voluptatibus excepturi nihil! Voluptatem dolores id accusantium temporibus assumenda et atque unde consectetur fugit sit qui voluptas fugit dolore nihil quidem tempore consequuntur similique reprehenderit et rerum. Velit corporis consequatur nesciunt est corporis et qui quod. Recusandae qui consequatur itaque inventore hic molestiae labore dolores rerum veniam culpa dolorem velit in molestiae voluptatem. Non sed quod animi excepturi sapiente obcaecati quod.</p> </div> </section>
</main> <script src="js/index.js"></script>
</body>
</html>

Show Nav On Scroll - Script Codes CSS Codes

@import "compass"
$color-active: rgba( 255 , 55 , 71 , 1 )
$color-white: rgba( 245 , 250 , 255 , 1 )
$color-black: rgba( 5 , 15 , 30 , 1 )
$sans: 'Titillium Web', sans-serif
html , body position: relative width: 100%
html background-color: $color-white overflow-x: hidden height: 100% font-size: 0
body overflow: hidden
section @include contain( padding-top , 5vw , 15px , 60px ) background-color: shade( $color-white , 5% ) position: relative display: block &:last-of-type @include contain( padding-bottom , 5vw , 15px , 60px )
.cover height: 100vh box-sizing: border-box background-color: $color-active z-index: 3 h1 @include translate( -50% , -50% ) @include contain( padding , 5vw , 15px , 60px ) background-color: $color-white line-height: 75% color: $color-active display: inline-block position: absolute left: 50% top: 50% p @include contain( padding , 2vw , 10px , 20px ) @include contain( bottom , 2vw , 10px , 20px ) color: $color-white position: absolute box-sizing: border-box width: 100% text-align: center &:before content: "" @include contain( bottom , 1vw , 0 , 10px ) position: absolute left: 50% border-top: 6px solid $color-white border-left: 6px solid transparent border-right: 6px solid transparent margin-left: -6px
.content z-index: 1 text-align: center div background-color: $color-white @include contain( padding-top , 5vw , 15px , 60px ) box-sizing: border-box display: inline-block text-align: left max-width: 100% width: 900px h2 , img , p , hr @include contain( margin-bottom , 5vw , 15px , 60px ) img &:last-child // need to modify the contain mixin to use a selector? // idk, but using important or making a second include // to reset for cases like this is not ideal margin-bottom: 0 !important h2 , p @include contain( padding-right , 5vw , 15px , 60px ) @include contain( padding-left , 5vw , 15px , 60px ) img @include transition( opacity 0.3s ease-in-out ) opacity: 0.95 width: 100% height: auto &:hover opacity: 1
nav @include contain( padding , 5vw , 10px , 40px ) background-color: $color-black position: fixed text-align: center z-index: 2 right: 0 left: 0 top: 0 a @include contain( padding , 4vw , 3px , 20px ) padding-top: 0 !important padding-bottom: 0 !important display: inline-block color: $color-white text-decoration: none text-transform: uppercase border-left: 1px solid tint( $color-black , 33% ) border-left: 1px solid tint( $color-black , 33% ) &:first-of-type border-left: none
h1 , h2 , h3 , p letter-spacing: 0.05em line-height: 135% font-family: $sans
h1 , h3 text-transform: uppercase
h1 @include contain( font-size , 12vw , 30px , 120px ) color: $color-active
h2 @include contain( font-size , 10vw , 20px , 70px ) text-align: center color: $color-active
p @include contain( font-size , 4vw , 14px , 21px )
h3 @include contain( font-size , 4vw , 10px , 15px )

Show Nav On Scroll - Script Codes JS Codes

(function() {
}).call(this);
Show Nav On Scroll - Script Codes
Show Nav On Scroll - Script Codes
Home Page Home
Developer Alex Bergin
Username abergin
Uploaded June 13, 2022
Rating 4.5
Size 4,898 Kb
Views 89,056
Do you need developer help for Show Nav On Scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Bergin (abergin) Script Codes
Name
Activate on Scroll
3D Accelerometer Ball Pit
P - Polaroid
Glitch Camera
Sibling Selector Style Change on Hover
Singing Text To Speech
Fancy Text Inputs
Motion blur loader
G - Golf
Hsl text shadow generator
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!