javascript - 如何在滚动条上改变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"));
        });
    }
});