Question

HTML：

<div class="page">
<p> content</p>
<p> content</p>
<p> content</p>
<p> content</p>
<p> content</p>

<div id="waveBlue"></div>

<p> content</p>
<p> content</p>
<p> content</p>
<p> content</p>
</div>

CSS：

#waveBlue {
  height: 43px;
  width: 200px;
  background: blue;
  position: absolute;
  display: inline-block;
  text-align: center;
}

JS：

$(document).ready(function() {
$(window).scroll(function(event) {
        var $page = $('.page')
        var $waveBlue = $('#waveBlue')
        //Get height of page
        var $pageHeight = $page.outerHeight();
        //Find the percent scrolled from page set to width of waveBlue
        var scrollPercent = ($pageHeight - window.scrollY)/$pageHeight;
        if(scrollPercent>=0) {
            $waveBlue.css('width', scrollPercent*200);
        }
    });   
});

正如你在我的小提琴中看到的那样，当我向下滚动页面时，蓝色div的宽度正在减小。相反，我希望增加它，但无法弄清楚如何。

加分：有没有办法可以从右到左增加div的宽度？

Answer 1

这可以帮助您解决第一个问题：

var scrollPercent = 1-($pageHeight - window.scrollY)/$pageHeight;

为了从右向左增加宽度，请执行以下操作：

waveBlue {
 height: 43px;
 width: 0px;
 right:0px;
 bottom:0px;
 background: blue;
 position: absolute;
 display: inline-block;
 text-align: center;
}

想要用滚动增加宽度，而是减少

1 个答案: