Div fixed hide when arriving in another div

Navigation
0

Hello,

I'm trying to implement this idea in my project:

link 

function removerSetas() {
    var topo = $(window).scrollTop(),
        alvo = $("#alvo").offset().top,
      setas = $(".left, .right");

  if ( topo > alvo ) {
    setas.addClass("hide");
  } else {
    setas.removeClass("hide");
  }
}

$(function() {
    $(window).scroll(removerSetas);
  removerSetas();
});

When arriving at a div with id="alvo" is added to classe="hide" in the arrows, seeing in the console actually adds correctly when it arrives at id="alvo"

In the structure of my project is not working properly, this is my code:

link

The hide class is being added by js before reaching the id = target. The divs without content left thus to be possible to see only the structure

Thank you for your help

    
asked by anonymous 05.03.2016 / 19:36

1 answer

0

You must indicate that the arrows should only disappear when the middle of the element is reached, so it is necessary to get the height of the element and divide it by 2 

function removerSetas() {
	var topo = $(window).scrollTop(),
  		alvo = $("#alvo").offset().top,
      alvoHeight = $("#alvo").height()
      setas = $(".left, .right");
      
  if ( topo > alvo + (alvoHeight / 2) ) {
  	setas.addClass("hide");
  } else {
  	setas.removeClass("hide");
  }
}

$(function() {
	$(window).scroll(removerSetas);
  removerSetas();
});

Follow the fiddle link: link

    
05.03.2016 / 19:59
Send live notification without being repeated Div with hide and iframe inside, however link does not open