Scrool Mouse Accompanying lines, with css and jquery

0

I need to make sure that the scrool of the mouse is running down, it follows a line to the side, this I was able to do, as I show in the link below

Click here to see the example

My difficulty is when you open the page and Two Lines already appears, how can I open the site and first line only ?

$(document).ready(function(){
  var count;
  $('#servicos ul li.bloco').each(function( index ) {
    count = index;
  });

  $(window).scroll(function (event) {

    var scroll = $(window).scrollTop();
    var item = $('#servicos ul').offset().top;
    if( (scroll+400) > item ){
      animSvg( $('.svg') );    
    }

    $('#servicos ul li.bloco').each(function( index ) {
      if( index < (count+1) ){
        var item = $(this).offset().top;
        var anim = $(this).find('.svg-lista');
        if( (scroll+200) > item ){
          var ativo = $('.label_serv a').children('li').eq(index);
          $('.label_serv a li').removeClass('active');
          ativo.addClass('active');


          animSvg( anim );    
        }
      }

    });

  });

});

function animSvg(obj){
  var val = obj.data('to');
  var dist = obj.scrollTop();

  obj.animate({
    'stroke-dasharray': val
  }, 1000, function() {
    /*fim*/
  });
}


function scrollCustom(id){
    var offset = $('#header_titulo').height();
    $('html, body').animate({scrollTop:$('#' + id).position().top + offset}, 'slow');
}
    
asked by anonymous 24.11.2017 / 17:02

1 answer

1

You can do this:

After $(document).ready(function(){... , include a flag var mPrimeiro = false; :

$(document).ready(function(){
   var mPrimeiro = false;
...

Where you have:

if( (scroll+200) > item ){

Change to:

if( scroll+mValor > item ){

And finally, include this code before the line above:

!mPrimeiro ? (mValor = item-1, mPrimeiro = true) : mValor = 200;
    
24.11.2017 / 19:22