Question

目前我有一个脚本，当用户开始滚动时会启动progress bar。

当用户从页面顶部到达340px时，是否可以将其更改为？

以下是我网站的演示：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 ));

Answer 1

我的猜测是操纵这个：

windowOffset = docOffset - docScroll,

您可能应该从windowOffset添加或减去320px。所以例如“

windowOffset = docOffset - docScroll + 320,

使用jQuery从顶部将页面顶部设置为340px

1 个答案: