スクロール量に応じて変化するプログレスバーを実装する

PCと比べて横幅の狭いスマホの画面では文字量によっては途方も無い長さになってしまうので、プログレスバーを設置してみることにしました。

このプログレスバーは画面のスクロール量に応じて変化します。今どれくらい読んだのかが直感的に分かるので、ページ離脱率が減るのではないかと思います。

JavaScript

$(function(){
var progressCss = '<style>#header .header:after{right:VAL%}</style>';
$('body').append('<div id="progresscss"></div>');
$('#progresscss').append(progressCss);
$(window).on('load scroll',function(){
var scrollTop = $(this).scrollTop(),
deviceHeight = $(this).height(),
execlude = $('#main .main .header').offset().top,
execScrollTop = scrollTop - execlude + deviceHeight,
contentHeight = $('#main .main .contents').height();
if( scrollTop > execlude ) {
var value = parseInt(100 - execScrollTop / contentHeight * 100);
if(Number.isInteger(value)) {
var css = progressCss.replace('VAL',value);
$('#progresscss style').replaceWith($(css));
}
} else {
var css = progressCss.replace('VAL',100);
$('#progresscss style').replaceWith($(css));
}
});
});

CSS

#header .header:before, #header .header:after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
display: block;
height: 4px;
width: 100%;
background: #ccc;
}
#header .header:after {
width: auto;
background: #000;
z-index: 1;
transition: 0.2s right;
}

contentHeightがプログレスバーを適用する要素です。
execludeの高さまで降りたらプログレスバーが進行します。
プログレスバーは#header .headerに擬似要素として出力しています。

ファイル・ロケーション: TIPS

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です