0
スクロールバーの垂直位置を示すプログレスバーを作成します。私はこの記事を使用しました：https://css-tricks.com/reading-position-indicator/ 自分のコードを示すためにスニペットを作成しました。 結果はOKですが、進行状況バーの下にスペースを作成したいと思います。実際には、プログレスバーはコンテンツを隠しています。私はあなたがコメントしたコードを見て見ることができるようにこの問題を解決しようとしましたが、私は私の問題を解決することができませんでした。 誰かがプログレスバーの下にスペースを作成してくれたら助かりますか？スクロールプログレスバーテキストコンテンツを隠す
$(document).on('ready', function() {
var winHeight = $(window).height(),
docHeight = $("#content").height(),
progressBar = $('progress'),
max, value;
/* Set the max scrollable area */
max = docHeight - winHeight;
progressBar.attr('max', max);
$(document).on('scroll', function() {
value = $(window).scrollTop();
progressBar.attr('value', value);
});
});
$(window).on('resize', function() {
winHeight = $(window).height(),
docHeight = $("#content").height();
max = docHeight - winHeight;
progressBar.attr('max', max);
value = $(window).scrollTop();
progressBar.attr('value', value);
});body {
padding-top: 20px;
height: 100vh;
position: relative;
}
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 10px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: red;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: red;
}
progress::-moz-progress-bar {
background-color: red;
}
body {
/*overflow-y: hidden;*/
}
#content {
/* padding-top: 20px;
height: 100vh;
overflow-y: auto;*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<progress value="0"></progress>
<div id="content">
Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt. Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.Morbi fermentum quam a dolor cursus malesuada. Quisque eget eleifend velit. Morbi a odio eu lacus faucibus facilisis. Maecenas eget est dictum, luctus augue sed, ultricies odio. Phasellus eget sagittis justo, at vehicula nunc. Nam sit amet felis tincidunt, eleifend mauris ut, accumsan purus. Vivamus interdum dolor pellentesque mauris rutrum, id ornare eros tincidunt.
</div>
</body>
答えをいただき、ありがとうございます。実際には、ユーザーがページをスクロールしても、進行状況とコンテンツの間のスペースを増やしたいだけです。コンテンツのdivにパディングトップとマージントップを追加しようとしましたが、動作しませんでした。 – Olivierrab