Result
jQuery
$(document).ready(function() { const win = $(window); const doc = $(document); const progressBar = $('progress'); const progressLabel = $('.progress-label'); const setValue = () => win.scrollTop(); const setMax = () => doc.height() - win.height(); const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100); //プログレスバー progressLabel.text(setPercent() + '%'); progressBar.attr({ value: setValue(), max: setMax() }); doc.on('scroll', () => { progressLabel.text(setPercent() + '%'); progressBar.attr({ value: setValue() }); }); win.on('resize', () => { progressLabel.text(setPercent() + '%'); progressBar.attr({ value: setValue(), max: setMax() }); })}); |
見出しの固定はJSではなくCSSのposition: sticky;が使われています
html
<article> <div class="article-title"> <h1>六号記</h1> <div class="progress-wrapper"> <div class="progress-label"></div> <progress></progress> </div> </div><img src="https://picsum.photos/500/300"/> <p>どうにもならぬことを、ひとりぶつぶつ云つてもしようがない、と思ふやうになつてゐることは事実である。誰でも考へてゐるやうなことを、わざわざ口に出して云ふのは、野暮の骨頂だ、といふ風にも教へられてゐる。が、しかし、どうにもならないとは、一体、いつからきまつてしまつたのであらう？ 当り前でないことが当り前で通るやうになつたのは、誰もが考へてゐるだけで、公然とそれを云はないからではないかと、私は近頃しきりにそそのかされるやうな気持になつて来た。</p>・・・</article> |
