Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How can I fill the skill bar when the scroll height is reached?

While working on my portfolio website, I am facing an issue wherein the skills bars fill up following the page weight rather than the section weight. Here's the code snippet that will help you understand the problem:

window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("html").style.width = scrolled + "%";
}
body {
  margin: 0;
  padding: 0;
  height: 3000px;
  overflow: auto;
  box-sizing: border-box;
}
#skills {
  position: absolute;
  top: 1750px;
  height: 730px;
  width: 100%;
  background-color: #151721;
}
.skillstitle {
  padding-top: 90px;
  margin: 0;
  color: #6274da;
  margin-left: 140px;
  font-size: 60px;
  line-height: 90px;
}
.container {
  margin-left: 145px;
  margin-right: 500px;
  background-color: #ddd;
  height: 25px;
  margin-top: 45px;
  border-radius: 5px 5px 5px 5px;
}
.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}
.skillshtml {
  position: absolute;
  font-family: arial;
  font-weight: bold;
  font-size: 12px;
  top: 219px;
  left: 160px;
}
.html {
  width: 90%;
  background-color: #f06529;
  height: 5px;
  border-radius: 5px 0px 0px 5px;
}
.htmlprct {
  position: absolute;
  top: 214px;
  left: 570px;
  font-size: 15px;
  font-weight: bold;
  font-family: arial;
  color: white;
}
  
<body>
  <div id="skills">
    <div id="skilltxt">
      <h1 class="skillstitle"> Skills </h1>
      <p class="skillshtml" id="skillshtml">HTML</p>
      <div class="container">
        <div class="skills html" id="html"></div>
        <p class="htmlprct">90%</p>
      </div>
      <script src="fillbarhtml.js"></script>
      </div>
      </div>
    </div>
  </div>
  </div>
</body>
</html>
To ensure that the skills bars fill up following the section weight, you can modify your CSS to set the position of the "skills" div dynamically using JavaScript. This will ensure that the script you've provided will work correctly, and the bars will fill up following the section's height. Let me know if you have any other questions.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
I see. It seems like the issue is that the skills bars fill up following the page weight rather than the section weight. To ensure that the skills bars fill up following the section weight, you can modify your CSS to set the position of the "skills" div dynamically using JavaScript. This will ensure that the script you've provided will work correctly, and the bars will fill up following the section's height. Let me know if you have any other questions.
avatar
Tolerim
a month ago
The issue you are facing is that the width of the skills bars is being calculated based on the entire height of the page rather than just the skills section. To fix this, you will need to dynamically get the height of the skills section and use that to calculate the width of the skills bars instead of using the height of the entire page. First, give the skills section an ID like "skills-section": 
<div id="skills-section">
  <!-- Skills bars code here -->
</div>
Then, update your JavaScript code like this: 
window.onscroll = function() {
  myFunction();
};

function myFunction() {
  var skillsSectionHeight = document.getElementById("skills-section").offsetHeight;
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var skillsSectionTop = document.getElementById("skills-section").offsetTop;
  var skillsSectionBottom = skillsSectionTop + skillsSectionHeight;
  var scrolled = ((winScroll - skillsSectionTop) / (skillsSectionHeight)) * 100;
  document.getElementById("html").style.width = scrolled + "%";
}
This will calculate the height of the skills section using the offsetHeight property, and then calculate the top and bottom positions of the skills section using the offsetTop property. Then, it will use those values to calculate the scrolled percentage based on the height of just the skills section, and update the width of the HTML skills bar accordingly.
;