Posts

Showing posts from August 15, 2019

Calculate percentage of a specific element has been scrolled into visible on the screen

Image
HTML <div class='info-container flex-layout'>   <span>Scroll down</span>   <span class='percent'>0%</span> </div> <div class='block'></div> <div class='element flex-layout'>   <span>Start</span>   <span>End</span> </div> <div class='block'></div> CSS body {   margin: 0;   padding: 0;   color: white; } .flex-layout {   display: flex;   flex-direction: column;   justify-content: space-between; } .info-container {   position: fixed;   z-index: 1;   font-size: 2em;   height: 100%;   width: 100%;   align-items: flex-end;   color: white; } .block {   height: 1000px;   background: #333; } .element {   align-items: center;   background: #000;   height: 450px; } JavaScript $(document).ready(function() {   $(window).scroll(function() {     var windowBottom = $(this).scrollTop() + $(this).height();     var elementTop = $(".element").offset().to
Post a Comment
Read more

JavaScript calculate percentage when user scroll web page

Image
<!doctype html> <html> <head>     <title>Color Changing</title>     <style type="text/css">         #percentage         {             position: fixed;         }     </style> </head> <body>     <div id="percentage"></div>     <div style="height: 4000px;"></div> </body> <script type="text/javascript">     window.onscroll = function(){         var heightOfWindow = window.innerHeight;         var contentScrolled = window.pageYOffset;         var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;         if(bodyHeight - contentScrolled <= heightOfWindow)        {            window.document.getElementById("percentage").innerHTML = "100%";        }        else        {            var total = bodyHeight - heightOfWindow;            var got = contentScrolled;            window.d
Post a Comment
Read more