Top Ribbon Visible on Scroll

Developer
Scott Dawson
Size
2,724 Kb
Views
4,048
  1. Top Ribbon Visible on Scroll Previews
  2. Top Ribbon Visible on Scroll HTML Codes
  3. Top Ribbon Visible on Scroll CSS Codes
  4. Top Ribbon Visible on Scroll JS Codes

How do I make an top ribbon visible on scroll?

Add a navigation or content ribbon at the top of a page only when the user has scrolled down the page. In this case, 100px (configurable in JS). Inspired by similar functionality on mashable.com. What is a top ribbon visible on scroll? How do you make a top ribbon visible on scroll? This script and codes were developed by Scott Dawson on 02 January 2023, Monday.

Top Ribbon Visible on Scroll Previews
IQ Test

Top Ribbon Visible on Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Top Ribbon Visible on Scroll</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/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="stuckOnTop">	<div class="stuckOnTopContents">	<h2>Jabberwocky</h2>	</div>	</div>	<div class="poem">	<h2>Jabberwocky</h2>	<p>`Twas brillig, and the slithy toves<br /> Did gyre and gimble in the wabe:<br />	All mimsy were the borogoves,<br /> And the mome raths outgrabe.	</p><p>	"Beware the Jabberwock, my son!<br /> The jaws that bite, the claws that catch!<br />	Beware the Jubjub bird, and shun<br /> The frumious Bandersnatch!"	</p><p>	He took his vorpal sword in hand:<br /> Long time the manxome foe he sought --<br />	So rested he by the Tumtum tree,<br /> And stood awhile in thought.	</p><p>	And, as in uffish thought he stood,<br /> The Jabberwock, with eyes of flame,<br />	Came whiffling through the tulgey wood,<br /> And burbled as it came!	</p><p>	One, two! One, two! And through and through<br /> The vorpal blade went snicker-snack!<br />	He left it dead, and with its head<br /> He went galumphing back.	</p><p>	"And, has thou slain the Jabberwock?<br /> Come to my arms, my beamish boy!<br />	O frabjous day! Callooh! Callay!'<br /> He chortled in his joy.	</p><p>	`Twas brillig, and the slithy toves<br /> Did gyre and gimble in the wabe;<br />	All mimsy were the borogoves,<br /> And the mome raths outgrabe.	</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Top Ribbon Visible on Scroll - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
.stuckOnTopContents {	background: #eee;	border-bottom: 1px solid #dedede;	transition: 0.2s;	position: absolute;	height: 45px;	width: 100%;	top: -45px;	overflow: hidden;	text-align: center;	font-family: 'Shadows Into Light Two', cursive;	}	.stuckOnTopContents p {	font-size: 1.3em;	}	.stuckOnTopContents.downItGoes {	top: 0px;	}	.stuckOnTop {	z-index: 10;	position: fixed;	left: 0;	right: 0;	top: 0;	}	.stuckOnTop h2 {	margin-top: 3px;	}	.poem {	text-align: center;	margin-bottom: 1000px;	font-family: 'Shadows Into Light Two', cursive;	}
p { line-height: 1.4em; margin-bottom: 1.4em;}
h2 { font-weight: bold; line-height: 2em; margin-top: 10px; }

Top Ribbon Visible on Scroll - Script Codes JS Codes

 $(function() {	$(window).scroll(function() { $(".stuckOnTopContents").toggleClass("downItGoes", $(window).scrollTop() > 100);	});	});
Top Ribbon Visible on Scroll - Script Codes
Top Ribbon Visible on Scroll - Script Codes
Home Page Home
Developer Scott Dawson
Username DawsonMediaD
Uploaded January 02, 2023
Rating 3
Size 2,724 Kb
Views 4,048
Do you need developer help for Top Ribbon Visible 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!

Scott Dawson (DawsonMediaD) Script Codes
Name
SCSS is More
Simple CSS for Disabled Buttons
Dot Matrix
Bookmarklet for Searching Google from Current URL
Animate Page Transition Using jQuery and CSS3 Scale Transforms
Testing Pesky IE8 and Font Awesome
Floating Footer Notification
Fading Message Notification
Problem with Chrome Row Hover
Rock Paper Scissors
Create amazing web content 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!