0

Tengo este JQuery (gracias a la ayuda de un compañero de aquí) en el que al hacer scroll hacia arriba me aparece la cabecera y al hacerlo hacia abajo me desaparece.

La cosa es que quiero que al hacer click en cierto enlace también aparezca , pero mi todavía ignorancia no lo consigue sacar.

¿Como capto el click en el enlace? Mi intención es que tanto si se hace ese click o si se hace scroll hacia arriba, aparezca la cabecera.

$(document).ready(function() {


  var lastScrollTop = 0;

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

    var st = $(this).scrollTop();

    if (st < lastScrollTop || $('#Conoceme').click(function());) {
      document.getElementById("Cabecera").style.display = "block"
    } else {
      document.getElementById("Cabecera").style.display = "none"
    }

    lastScrollTop = st;
  });
});

2 respuestas 2

2

Puedes crearte una función mostrarCabecera para mostrar u ocultar la cabecera y que puedas llamar desde los dos controladores de eventos: scroll y click:

$(document).ready(function() {


  var lastScrollTop = 0;
  
  function mostrarCabecera(mostrar){
    document.getElementById('Cabecera').style.display =
      mostrar ? 'block' : 'none';
  }

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

    var st = $(this).scrollTop();
    
    mostrarCabecera(st < lastScrollTop);

    lastScrollTop = st;
  });
  
  $('#Conoceme').click(function(e) {
    e.preventDefault();
    mostrarCabecera(true);
  });
});
body{
  padding-top: 400px;
}

#Cabecera{
  height: 100px;
  width: 100%;
  background-color: #cccccc;
  display: none;
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Cabecera">Cabecera</div>
<a id="Conoceme" href="#">Conóceme</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

0

El código que has puesto recoge el evento del scroll como bien dices. Para saber cuándo hacen click necesitas .click. Colócalo antes o después del $(window).scroll(function(event), no dentro.

$( "#target" ).click(function() {
  document.getElementById("Cabecera").style.display = "block"
});

Sustituye #target por el enlace en cuestión que quieras controlar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.