В настоящее время у меня есть скрипт, который запускает progress bar
в тот момент, когда пользователь начинает прокрутку.Установите верхнюю часть страницы на 340px сверху с помощью jQuery
Можно ли изменить это, когда пользователь достигнет 340 пикселей в верхней части страницы?
Вот демо моего сайта: http://pixsols.com/test/wordpress/reading-progress/
Вот мой текущий код:
(function ($) {
$.fn.progressScroll = function(options) {
var settings = $.extend({
fontSize : 20,
color : '#009ACF',
height : '5px',
textArea : 'dark',
}, options);
// element state info
var docOffset = $(this).offset().top,
elmHeight = $(this).height(),
winHeight = $(window).height();
// listen for scroll changes
$(window).on('scroll', function() {
var docScroll = $(window).scrollTop(),
windowOffset = docOffset - docScroll,
viewedPortion = winHeight + docScroll - docOffset;
if($(window).scrollTop() > 0) {
if($('.scrollWrapper').hasClass('hidden')) {
$('.scrollWrapper').removeClass('hidden').hide();
$('.scrollWrapper').slideDown('slow');
}
} else {
$('.scrollWrapper').slideUp('slow');
$('.scrollWrapper').addClass('hidden');
}
if(viewedPortion < 0) { viewedPortion = 0; }
if(viewedPortion > elmHeight) { viewedPortion = elmHeight; }
// calculate viewed percentage
var viewedPercentage = viewedPortion/elmHeight;
// set percent in progress element
$('.scroll-bar').css('width', (viewedPercentage*100)+'%');
});
var self = this;
$(window).on('resize', function() {
docOffset = $(self).offset().top;
elmHeight = $(self).height();
winHeight = $(window).height();
$(window).trigger('scroll');
});
$(window).trigger('scroll');
var $el = $('.scroll-bar').css(settings);
return $el;
};
}(jQuery));
К сожалению, это не работает :( нулевой эффект. – michaelmcgurk
Хммм и как об этом? если ($ (окно) .scrollTop()> 320) { ??? – jarasss