Я хочу нарисовать линию на экране от верхней части страницы до нижней части, когда пользователь прокручивает страницу и имеет стрелку внизу. Я не хочу использовать фиксированное положение, чтобы он всегда находился в одном и том же месте, я хочу, чтобы он указывал, где они находятся на странице, определяя длину страницы и т.д.
У меня есть следующий код, который работает с точкой. Проблема с этим заключается в том, что стрелка исчезает в нижней части страницы, когда я прокручиваю ее чуть позже на полпути вниз.
Я пробовал разные варианты этого кода, но никто не работает. Может ли кто-нибудь помочь?
//Draw dotted line on scroll - works to certain extent but scrolls off page
$( window ).scroll(function() {
if ( $.windowScrollTop() > 10 ) {
var pos = $.windowScrollTop();
var scrollHeight = $(window).innerHeight();
var element = $('#dashes');
$( '#line' ).css( 'height', pos - scrollHeight / 4 );
$( '#arrow' ).css( 'top', pos - scrollHeight / 4 );
} else {
$( '#line' ).css( 'height', '6px' );
$( '#arrow' ).css( 'top', '-150px' );
}
});
//also tried the below
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// when scroll to bottom of the page
alert('bottom');
} else {
$( '#line' ).css( 'height', $(window).scrollTop() );
$( '#arrow' ).css( 'top', $(window).scrollTop() );
}
});