Scroll Indicator using JQuery

Live Demo:
http://www.bibekshakya.com/demo/jquery/scroll-indicator-jquery/

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Scroll Indicator</title>
 <!-- using google font -->
 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400" rel="stylesheet">
 <!-- using font awesome -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
   crossorigin="anonymous">
 <!-- using custom css -->
 <link rel="stylesheet" href="css/main.css">
</head>

<body>
 <div id="wrapper">
  <!-- header -->
  <header id="header">
   <div class="container">
    <div class="logo">
     <a href="#">Demo</a>
    </div>
    <nav id="nav">
     <ul>
      <li>
       <a href="#">Home</a>
      </li>
      <li>
       <a href="#">About</a>
      </li>
      <li>
       <a href="#">Contact</a>
      </li>
     </ul>
    </nav>
   </div>
  </header>
  <!-- main -->
  <main>
   <!-- hero block -->
   <section class="heroBlock" style="background-image: url('images/img-hero.jpg')">
    <div class="container">
     <div class="content">
      <p>We are awesome</p>
      <h1>About Us</h1>
     </div>
    </div>
   </section>
   <!-- content block -->
   <section class="contentBlock">
    <div class="container">
     <h2>Our input helps make their solutions.</h2>
     <p>Vitae vero harum necessitatibus excepturi iure, odio deleniti at dicta minima delectus laboriosam, in fugit. A repudiandae
      quos minima ex incidunt magni. Deleniti ipsum aliquid voluptates hic sint magni deserunt quo harum consectetur quibusdam.
      Tempora natus numquam magni harum voluptatibus aliquid atque in veniam.</p>
     <a href="#" class="btn">Learn More
      <i class="fas fa-caret-right"></i>
     </a>
    </div>
   </section>
   <!-- service block -->
   <section class="servicesBlock">
    <div class="container">
     <div class="cols">
      <div class="col">
       <div class="icon">
        <i class="fab fa-envira"></i>
       </div>
       <div class="holder">
        <h3>Digital Solutions</h3>
        <p>Ullam neque reprehenderit maiores quod non numquam! Iure vero error ut</p>
       </div>
      </div>
      <div class="col">
       <div class="icon">
        <i class="fas fa-briefcase"></i>
       </div>
       <div class="holder">
        <h3>Explore work</h3>
        <p>Ullam neque reprehenderit maiores quod non numquam! Iure vero error ut</p>
       </div>
      </div>
      <div class="col">
       <div class="icon">
        <i class="fas fa-globe"></i>
       </div>
       <div class="holder">
        <h3>Our Mission</h3>
        <p>Ullam neque reprehenderit maiores quod non numquam! Iure vero error ut</p>
       </div>
      </div>
     </div>
    </div>
   </section>
  </main>
  <!-- footer -->
  <footer id="footer">
   <div class="container">
    <div class="cols">
     <div class="col">
      <div class="social">
       <ul>
        <li>
         <a href="#">
          <i class="fab fa-facebook-f"></i>
         </a>
        </li>
        <li>
         <a href="#">
          <i class="fab fa-twitter"></i>
         </a>
        </li>
        <li>
         <a href="#">
          <i class="fab fa-linkedin-in"></i>
         </a>
        </li>
       </ul>
      </div>
      <address>
       17 Oxford Street
       <br> London, SW10, UK
      </address>
     </div>
     <div class="col">
      <div class="content">
       <p>Eum mollitia quos officiis ipsam quisquam dolor atque, facere aliquam maiores asperiores odit aspernatur expedita
        cumque sequi laborum minima non error pariatur? Ipsum impedit magni, facere labore neque possimus placeat saepe ullam
        nobis! Qui, aspernatur? In, magni dolor! Dolores ipsam nisi laboriosam cupiditate enim.</p>
      </div>
     </div>
    </div>
   </div>
  </footer>
  <!-- horizontal scroll bar -->
  <div class="scrollBarHolder">
   <div id="scrollBar" style="width: 0"></div>
  </div>
 </div>
 <!-- using jquery cdn  -->
 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
   crossorigin="anonymous"></script>
 <!-- using custom js -->
 <script src="js/main.js"></script>
</body>

</html>

SCSS Code (scss/base/_mixins.scss)
// size
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// hide text
@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

// list reset
%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// transform
@mixin transform ($value) {
  -moz-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

// transition
@mixin transition ($value) {
  -moz-transition: $value;
  -ms-transition: $value;
  -webkit-transition: $value;
  transition: $value;
}

// placeholder
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
  &::-moz-placeholder {
    opacity: 1;
    @content
  }
  &:-moz-placeholder {
    @content
  }
  &:-ms-input-placeholder {
    @content
  }
  &.placeholder {
    @content
  }
}

SCSS Code (scss/base/_reset.scss)
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}

body {
  color: $default-text-color;
  background: $default-background-color;
  font: 300 #{$default-font-size}/#{$default-line-height} $default-font-family;
  min-width: $default-min-width;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.gm-style img {
  max-width: none
}

@media only screen and (min-width:1025px) {
  a[href^=tel],
  a[href^=skype],
  a[href^=sms] {
    cursor: default;
    pointer-events: none;
  }
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $headings-font-family;
  font-weight: 400;
  margin: 0 0 10px;
  color: $headings-color;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

p {
  margin: 0 0 20px;
}

a {
  color: $default-link-color;
  text-decoration: none;
  transition: color $animation-speed linear;
  &:hover,
  &:focus {
    text-decoration: none;
    color: darken($default-link-color, 15%);
  }
}

SCSS Code (scss/base/_variable.scss)
// colors
$black: #000;
$white: #fff;
$gray: #333;
$primary-color: #ff214f;

// font family
$primary-font: 'Poppins', sans-serif;

// Body
$default-text-color: $black  !default;
$default-background-color: $white !default;
$default-font-size: 16px !default;
$default-line-height: 1.6 !default;
$default-font-family: $primary-font !default;
$default-min-width: 320px;

// Links
$default-link-color: $primary-color;

// Headers
$h1-font-size: 46px !default;
$h2-font-size: 32px !default;
$h3-font-size: 22px !default;
$h4-font-size: 18px !default;
$h5-font-size: 17px !default;
$h6-font-size: 15px !default;

$headings-font-family: $primary-font !default;
$headings-color: $black !default;

// animation
$animation-speed: 0.3s; 

SCSS Code (scss/base/_main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';
// general
#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.container {
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

h1 {
  @media only screen and (max-width: 767px) {
    font-size: 36px;
  }
}

h2 {
  @media only screen and (max-width: 767px) {
    font-size: 24px;
    line-height: 1.4;
  }
}

p {
  margin: 0 0 25px;
}

// social icons
.social {
  li {
    float: left;
    margin: 0 20px 10px 0;
  }
  a {
    color: darken($white, 10%);
    &:hover {
      color: $primary-color;
    }
  }
}

// header
#header {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 20px 0;
  text-transform: uppercase;
  @media only screen and (max-width: 767px) {
    padding: 10px 0;
  }
  a {
    color: $black;
    transition: color 0.3s linear;
    &:hover {
      color: $primary-color;
    }
  }
  .logo {
    float: left;
    font-size: 20px;
    font-weight: 400;
  }
  #nav {
    float: right;
    font-size: 14px;
    margin: 5px 0 0;
    letter-spacing: 1px;
    li {
      float: left;
      margin: 0 0 0 20px;
      @media only screen and (max-width: 767px) {
        margin: 0 0 0 10px;
      }
    }
  }
}

// hero block
.heroBlock {
  position: relative;
  color: $white;
  text-align: center;
  padding: 140px 0;
  background-size: cover;
  background-position: 50% 0;
  @media only screen and (max-width: 767px) {
    padding: 80px 0;
  }
  &:before {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .content {
    position: relative;
    z-index: 1;
  }
  h1 {
    color: #fff;
  }
  p {
    margin: 0;
    color: darken($white, 20%);
  }
}

// content block
.contentBlock {
  text-align: center;
  padding: 60px 0;
  @media only screen and (max-width: 767px) {
    padding: 30px 0;
  }
  .container {
    max-width: 800px;
  }
  .btn {
    background: $primary-color;
    color: $white;
    display: inline-block;
    vertical-align: top;
    padding: 8px 25px;
    border-radius: 25px;
  }
  .fas {
    margin: 0 0 0 5px;
  }
}

// service block
.servicesBlock {
  padding: 60px 0;
  @media only screen and (max-width: 1023px) {
    padding: 60px 0 25px;
  }
  @media only screen and (max-width: 767px) {
    padding: 30px 0 0;
  }
  .cols {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 -25px;
    @media only screen and (max-width: 1023px) {
      margin: 0;
    }
    &:before {
      content: '';
      background: darken($white, 10%);
      position: absolute;
      top: -60px;
      left: 25px;
      right: 25px;
      height: 1px;
      @media only screen and (max-width: 1023px) {
        left: 0;
        right: 0;
      }
      @media only screen and (max-width: 767px) {
        top: -30px;
      }
    }
  }
  .col {
    float: left;
    width: 33.33%;
    padding: 0 25px;
    @media only screen and (max-width: 1023px) {
      width: 100%;
      float: none;
      padding: 0 0 35px;
      text-align: center;
    }
  }
  .icon {
    float: left;
    margin: 0 30px 0 0;
    font-size: 60px;
    line-height: 1;
    color: $primary-color;
    @media only screen and (max-width: 1023px) {
      font-size: 50px;
      margin: 0 0 10px;
      float: none;
    }
    @media only screen and (max-width: 767px) {
      font-size: 40px;
    }
  }
  .holder {
    display: block;
    overflow: hidden;
  }
  h3 {
    @media only screen and (max-width: 1023px) {
      margin: 0;
    }
  }
  p {
    margin: 0;
  }
}

// footer
#footer {
  background: lighten($black, 15%);
  color: darken($white, 10%);
  padding: 50px 0 60px;
  @media only screen and (max-width: 767px) {
    padding: 30px 0 10px;
  }
  .cols {
    margin: 0 -30px;
    overflow: hidden;
    @media only screen and (max-width: 767px) {
      margin: 0;
    }
  }
  .col {
    float: left;
    width: 70%;
    padding: 0 30px;
    @media only screen and (max-width: 767px) {
      width: 100%;
      padding: 0 0 20px;
    }
    &:first-child {
      width: 30%;
      @media only screen and (max-width: 767px) { 
        width: 100%;
      }
    }
  }
  p {
    margin: 0;
  }
  .social {
    display: block;
    overflow: hidden;
    margin: 0 0 10px;
  }
  address {
    font-style: normal;
  }
}

// progress bar
.scrollBarHolder {
  height: 8px;
  background: darken($white, 15%);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  #scrollBar {
    height: 8px;
    background: $primary-color;
  }
}

Video Tutorial


Updated Code (js/main.js)
// create the function
function scrollIndicator() {
 // get the value of scrollbar
 var windowScroll = $(window).scrollTop();
 
 // get actual height
 var height = $(document).height() - $(window).height();

 // calculate scrolled value
 var scrolled = (windowScroll/height) * 100;
 
 // add scrolled value in #scrollBar width in css
 $('#scrollBar').css('width', scrolled + '%');
}

// call the function on scroll
$(window).scroll(function() {
 scrollIndicator();
});

Share this

Related Posts