Sticky Nav with Scrollto

Developer
Bottomline Interactive
Size
2,518 Kb
Views
36,432
  1. Sticky Nav with Scrollto Previews
  2. Sticky Nav with Scrollto HTML Codes
  3. Sticky Nav with Scrollto CSS Codes
  4. Sticky Nav with Scrollto JS Codes

How do I make an sticky nav with scrollto?

What is a sticky nav with scrollto? How do you make a sticky nav with scrollto? This script and codes were developed by Bottomline Interactive on 25 September 2022, Sunday.

Sticky Nav with Scrollto Previews
IQ Test

Sticky Nav with Scrollto - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Nav with Scrollto</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /** page structure **/
#w { width: 750px; margin: 0 auto;
}
#content { padding: 25px 20px;
}
.section { margin:90px 0; background: #e1e1e1; height: 300px;
}
#stickynav { z-index: 9999;
}
#stickynav #nav { position: fixed; z-index: 9999; }
#stickynav #nav li { display: inline; }
#stickynav #nav li a { float: left; text-decoration: none; margin-right: 10px; font-size: 1.2em; font-weight: bold; padding: 5px 7px; background: #cce4c4; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
}
#stickynav #nav li a:hover { background: #d8f0d0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="w"> <div id="content"> <nav id="stickynav"> <ul id="nav"> <li><a href="#link1">Section 1</a></li> <li><a href="#link2">Section 2</a></li> <li><a href="#link3">Section 3</a></li> <li><a href="#link4">Section 4</a></li> </ul> </nav> <section id="link1" class="section"> <h2>Section 1</h2> </section> <section id="link2" class="section"> <h2>Section 2</h2> </section> <section id="link3" class="section"> <h2>Section 3</h2> </section> <section id="link4" class="section"> <h2>Section 4</h2> </section> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.5/jquery.scrollTo.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky Nav with Scrollto - Script Codes CSS Codes

/** page structure **/
#w { width: 750px; margin: 0 auto;
}
#content { padding: 25px 20px;
}
.section { margin:90px 0; background: #e1e1e1; height: 300px;
}
#stickynav { z-index: 9999;
}
#stickynav #nav { position: fixed; z-index: 9999; }
#stickynav #nav li { display: inline; }
#stickynav #nav li a { float: left; text-decoration: none; margin-right: 10px; font-size: 1.2em; font-weight: bold; padding: 5px 7px; background: #cce4c4; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
}
#stickynav #nav li a:hover { background: #d8f0d0;
}

Sticky Nav with Scrollto - Script Codes JS Codes


$(function(){ $("#nav a").click(function(e){ e.preventDefault(); $('html,body').scrollTo(this.hash,this.hash); });
});
Sticky Nav with Scrollto - Script Codes
Sticky Nav with Scrollto - Script Codes
Home Page Home
Developer Bottomline Interactive
Username BottomlineInteractive
Uploaded September 25, 2022
Rating 3
Size 2,518 Kb
Views 36,432
Do you need developer help for Sticky Nav with Scrollto?

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!

Bottomline Interactive (BottomlineInteractive) Script Codes
Name
Tucked Corners
Simple round Numbered Styling
Center align div
Cut and Paste Roll Link
Glow hover input field
Non-uniform Shaped CSS Hovers
Simple Waypoint Example
Simple Hover Title Slide
Bootstrap Sandbox
Custom Animated Select Box
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!