0

Estou tentando fazer este código para trocar o elemento quando o mesmo atingir o topo, o elemento ficara fixo ate que o próximo atinja o top.

HTML

  <p>
  elemento A  
  </p>

 <p>
  elemento B  
 </p>

 <p>
  elemento C  
 </p>

JS

function scroll() {
    (window).scroll(function() {
        if ($(window).scrollTop() > elementPosition.top) {
            $('p').css('position', 'fixed').css('top', '0');

        } else {
            $('p').css('position', 'static');


        }
    });
}

1 Resposta 1

0

É possível fazer um loop pelos elementos verificando qual está no topo e aplicar fixed, e os que não estiverem, aplicar static:

curr_fixed = 0;
$(window).on("scroll", function(){
	els = $("p");
    janela_scroll = $(window).scrollTop();
	$.each(els, function(i,v){
		if( ($(this).offset().top)-janela_scroll <= $(this).outerHeight() ){
			curr_fixed = i;
			$(this).css({
				"position":"fixed",
				"top":"0px"
			});
			
			$.each(els, function(i,v){
				if(i != curr_fixed){
					$(this).css({
						"position":"static",
						"top":"0px"
					});
				}
			});
		}
	});
});
html, body{ margin: 0; padding: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
	elemento A  
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
	elemento B  
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
	elemento C  
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .