Div fixed hide when arriving in another div

Asked

Viewed 182 times

0

Hello,

I’m trying to implement this idea to my project:

https://jsfiddle.net/dx2dsta9/

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 you arrive in a div with the id="alvo" is added to classe="hide" in the arrows, seeing on the console actually adds correctly when it arrives in the id="alvo"

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

http://jsfiddle.net/p4ygLp6y/embedded/result/

The Hide class is being added by js before arriving at id=target. The Divs without content left so it is possible to see only the structure

I appreciate help

javascript jquery css twitter-bootstrap

1 answer

0

You must indicate that the arrows should only disappear when the middle of the element is reached, for this it is necessary to obtain 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: https://jsfiddle.net/dx2dsta9/1/

  • Hello @Eriky, thank you for your reply, there was no amendment implementing your suggestion: http://jsfiddle.net/p4ygLp6y/1/embedded/result/

  • the div with id "target" is loose on the page, think to get effect you will have to put the contents that is after the div "target" inside it.

  • I had tried anyway not changed, I tried in fiddle http://jsfiddle.net/p4ygLp6y/2/ is la advances a little but some before id=target also

Browser other questions tagged javascript jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.