2016-01-13 3 views
1

В настоящее время у меня есть скрипт, который запускает 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)); 

ответ

2

Мое предположение было бы манипулировать этим:

windowOffset = docOffset - docScroll, 

Вероятно, вы должны добавить или вычесть 320px из windowOffset. Так, например,»

windowOffset = docOffset - docScroll + 320, 
+0

К сожалению, это не работает :( нулевой эффект. – michaelmcgurk

+1

Хммм и как об этом? если ($ (окно) .scrollTop()> 320) { ??? – jarasss

Смежные вопросы