0
Я хочу создать индикатор выполнения, который указывает вертикальное положение полосы прокрутки. Я использовал эту статью: https://css-tricks.com/reading-position-indicator/ Я сделал фрагмент, чтобы показать вам мой код. Результат в порядке, но я хочу создать пробел под индикатором выполнения. Фактически, индикатор выполнения скрывает содержимое. Я попытался решить эту проблему, как вы можете видеть, просмотрев код, который я прокомментировал, но я не смог решить свою проблему. Может ли кто-нибудь помочь мне в создании пространства под индикатором выполнения?Scroll progres bar скрывает текстовое содержимое
$(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>
Спасибо за ответ. На самом деле, я просто хочу увеличить пространство между параметром progress и содержимым, даже когда пользователь прокручивает страницу. Я попытался добавить padding-top и margin-top в div, но это не сработало. – Olivierrab