Scrollbar Scrolling Progress Annotation

Developer
Alexander Nastase
Size
2,265 Kb
Views
30,360
  1. Scrollbar Scrolling Progress Annotation Previews
  2. Scrollbar Scrolling Progress Annotation HTML Codes
  3. Scrollbar Scrolling Progress Annotation CSS Codes
  4. Scrollbar Scrolling Progress Annotation JS Codes

How do I make an scrollbar scrolling progress annotation?

What is a scrollbar scrolling progress annotation? How do you make a scrollbar scrolling progress annotation? This script and codes were developed by Alexander Nastase on 21 August 2022, Sunday.

Scrollbar Scrolling Progress Annotation Previews
IQ Test

Scrollbar Scrolling Progress Annotation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrollbar Scrolling Progress Annotation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="scrollbubble"></div>
<div style="height: 2000px"> <p>Scroll<br />down<br />↓ ↓ ↓</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>

Scrollbar Scrolling Progress Annotation - Script Codes CSS Codes

body { font: 12px/1.5 Helvetica, sans-serif;
}
p { margin-right: 30px; text-transform: uppercase; text-align: right; font-size: 70px; font-weight: bold; line-height: 1; color: rgb(200, 200, 200);
}
#scrollbubble { display: none; position: fixed; top: 0; right: 20px; z-index: 500; padding: 3px 8px; background-color: #000; color: #FFF; border-radius: 3px;
}
#scrollbubble:after { content: " "; position: absolute; top: 50%; right: -8px; height: 0; width: 0; margin-top: -4px; border: 4px solid transparent; border-left-color: #000;
}

Scrollbar Scrolling Progress Annotation - Script Codes JS Codes

var scrollTimer = null;
$(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollbubble').height() / 2 ; $('#scrollbubble') .css('top', distance) .text('Progress (' + Math.round(progress * 100) + '%)') .fadeIn(100) ; // Fade out the annotation after 1 second of no scrolling. if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scrollbubble').fadeOut(); }, 1000);
});
Scrollbar Scrolling Progress Annotation - Script Codes
Scrollbar Scrolling Progress Annotation - Script Codes
Home Page Home
Developer Alexander Nastase
Username anodpixels
Uploaded August 21, 2022
Rating 3
Size 2,265 Kb
Views 30,360
Do you need developer help for Scrollbar Scrolling Progress Annotation?

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!

Alexander Nastase (anodpixels) Script Codes
Name
Right Click Menu
Tryout_slider
Old Browser Warning
Defcamp
Layout Experimentation Animation
Nifty Slider
Accordion - Menu
Pressable CSS Buttons
A Pen by Alexander Nastase
Target effect
Create amazing SEO 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!