How to change div width on scroll

Question

I'm building a kind of reference web page, so it's just for practice. In my opinion i'm done with the css and html basics, but i havent got enought time to care with JavaScript, so i dont know exactly how it's works.

I try to make a "skills bar" it should to display my knowledge about langues and etc.

My code:

<div class="activate" data-percent="70%" style="transition-timing-function: linear;">C++</div>
<div class="activate" data-percent="80%" style="transition-timing-function: ease";>C#</div>
<div class="activate" data-percent="50%" style="transition-timing-function: ease-in;";>Java</div>
<div class="activate" data-percent="80%" style="transition-timing-function: ease-out;";>HTML</div>
<div class="activate" data-percent="60%" style="transition-timing-function: ease-in-out;";>CSS</div>
<div class="activate" data-percent="10%" style="transition-timing-function: ease";>JavaScript</div>
<div class="activate" data-percent="40%" style="transition-timing-function: ease-out;";>SQL</div>
<div class="activate" data-percent="30%" style="transition-timing-function: ease-out;";>CISCO</div>
<div class="activate" data-percent="10%" style="transition-timing-function: linear;">Python</div>
<div class="activate" data-percent="75%" style="transition-timing-function: ease-in-out;";>Microsoft Office</div>
<div class="activate" data-percent="50%" style="transition-timing-function: ease";>GIMP</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
(function() {

        var activateEl = $('div.activate'),
                activateElOffset = activateEl.offset().top/2,
                documentEl = $(document);

        documentEl.on('scroll', function() {
            if (documentEl.scrollTop() > activateElOffset) activateEl.style["width"] = activateEl.getAttribue('data-percent');
        });

})();
</script>

The if is good, but after it don't want to change the value of the div's width. I tried it in several ways, but didn't work. What's the problem? Could i improve this code? How?

Answer 1

Try to use css() method of jQuery to set width of the div. There is also data() method to get data-property of element.

documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > activateElOffset) {

        activateEl.each(function(){
            $(this).css("width", $(this).data("percent"));
        });
    }
});