Skip to content

Instantly share code, notes, and snippets.

@bgoonz

bgoonz/README.markdown

Created September 23, 2021 07:10
Show Gist options
  • Save bgoonz/878c7de75ca116ec76dbfcc63f2611f0 to your computer and use it in GitHub Desktop.
Save bgoonz/878c7de75ca116ec76dbfcc63f2611f0 to your computer and use it in GitHub Desktop.
Download ZIP
scroll-percentage
Raw
dist-index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Scroll Percentage</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<p id="fakeHeight"></p>
<p id="scrollPercentLabel">Scroll Percentage: <span>0</span>%</p>
</body>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
Raw
dist-script.js
$(document).ready(function() {
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent*100);
$('#scrollPercentLabel>span').html(scrollPercentRounded);
repositionLabel();
});
$(window).resize(function(){
repositionLabel();
});
function repositionLabel() {
$('#scrollPercentLabel').css({
position:'fixed',
left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
});
}
repositionLabel();
});
Raw
dist-style.css
body {
background-image: url('https://subtlepatterns.com/patterns/crissXcross.png');
margin: 0px;
padding: 0px;
}
#fakeHeight {
height: 6000px;
width: 1px;
}
#scrollPercentLabel {
font-family: Impact;
font-size: 50px;
color: #2B2B2B;
background: rgba(255, 255, 255, 0.5);
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
border-radius: 15px;
}
Raw
index.html
<body>
<p id="fakeHeight"></p>
<p id="scrollPercentLabel">Scroll Percentage: <span>0</span>%</p>
</body>
Raw
script.js
$(document).ready(function() {
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent*100);
$('#scrollPercentLabel>span').html(scrollPercentRounded);
repositionLabel();
});
$(window).resize(function(){
repositionLabel();
});
function repositionLabel() {
$('#scrollPercentLabel').css({
position:'fixed',
left: ($(window).width() - $('#scrollPercentLabel').outerWidth()) / 2,
top: (($(window).height() - $('#scrollPercentLabel').outerHeight()) / 2) - $('#scrollPercentLabel').height()
});
}
repositionLabel();
});
Raw
style.css
body {
background-image: url('https://subtlepatterns.com/patterns/crissXcross.png');
margin: 0px;
padding: 0px;
}
#fakeHeight {
height: 6000px;
width: 1px;
}
#scrollPercentLabel {
font-family: Impact;
font-size: 50px;
color: #2B2B2B;
background: rgba(255, 255, 255, 0.5);
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
box-shadow: 8px 8px 5px rgba(20, 20, 20, 1);
border-radius: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment