如何更改滚动的div宽度

Question

我正在构建一种参考网页，因此仅供参考。 以我的观点，我已经完成了CSS和HTML的基础知识，但是我没有足够的时间来处理JavaScript，所以我不知道它是如何工作的。

我尝试制作一个“技能栏”，以显示我对语言等的了解。

我的代码：

<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>

if是好的，但是之后不要更改div的宽度值。 我尝试了几种方法，但是没有用。 有什么问题？ 我可以改善此代码吗？ 怎么样？

Answer 1

尝试使用jQuery的css（）方法设置div的宽度。 还有data（）方法来获取元素的数据属性。

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

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