0
Ich möchte einen Fortschrittsbalken erstellen, der die vertikale Position der Bildlaufleiste angibt. Ich habe diesen Artikel verwendet: https://css-tricks.com/reading-position-indicator/ Ich habe ein Schnipsel gemacht, um Ihnen meinen Code zu zeigen. Das Ergebnis ist OK, aber ich möchte ein Leerzeichen unterhalb der Fortschrittsleiste erstellen. Tatsächlich verbirgt die Fortschrittsanzeige den Inhalt. Ich habe versucht, dieses Problem zu lösen, wie Sie sehen können, indem ich den von mir kommentierten Code beobachte, aber ich konnte mein Problem nicht lösen. Könnte mir bitte jemand helfen, einen Platz unter dem Fortschrittsbalken zu erstellen?Scroll Progres Bar versteckt Textinhalt
$(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>
Vielen Dank für die Antwort. In der Tat, ich möchte nur den Abstand zwischen dem Fortschritt Par und dem Inhalt erhöhen, selbst wenn der Benutzer die Seite scrollt. Ich habe versucht, ein Padding-Top und Margin-Top auf dem Div des Inhalts hinzuzufügen, aber es hat nicht funktioniert. – Olivierrab