Masquer l'en-tête fixe sur faites défiler vers le bas, afficher sur faites défiler vers le haut et planer

J'ai un en-tête fixe qui se cache sur faites défiler vers le bas et qui montre de nouveau sur faites défiler vers le haut, tout cela fonctionne comme prévu. Mais j'aimerais qu'il s'affiche lorsque vous passez la souris c'est la position, des idées?

Ce que j'ai obtenu jusqu'à présent:

$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
   var st = $(this).scrollTop();

   if(Math.abs(lastScrollTop - st) <= delta)
      return;

   if (st > lastScrollTop){
       //downscroll code
       $("#header").css('visibility','hidden').hover ()
   } else {
      //upscroll code
      $("#header").css('visibility','visible');
   }
   lastScrollTop = st;
});
});

Violon: http://jsfiddle.net/r6kTs/

InformationsquelleAutor oscarpas | 2014-07-15
  1. 5

    Vous pouvez essayer de changer sa position à la place:

    if (st > lastScrollTop){
       //downscroll code
       $("#header").css({top:'-120px'})
       .hover(function(){$("#header").css({top: '0px'})})
   } else {
      //upscroll code
      $("#header").css({top:'0px'});
   }

    Et les ajouter à en-tête #css:

    #header{
    /*YOUR CSS*/
    border-bottom: 2px solid #333 ;
    }

    De cette façon, vous pouvez passer la souris sur l'en-tête de la bordure du bas et de la montrer.

    Espérons que cela fonctionne pour vous!

    • Bonne idée, il fonctionne comme prévu! J'ai augmenté la taille de la bordure un peu pour le rendre plus facile à activer et mis à la frontière transparente. jsfiddle.net/uAc3p/5 Merci
    • votre jsfiddle est une meilleure solution autonome, puis environ 20 github grandes bibliothèques que j'ai vu!
    InformationsquelleAutor kidkamek
  2. 0

    Vous pouvez essayer ce qui suit à l'aide de la clientY propriété de l'objet d'événement pour vérifier la position de la souris par rapport à la fenêtre d'affichage.

    $(document).on('mousemove',function(e){
    var hidden = ($("#header").css('visibility')!='visible');
    console.log(hidden);
    if(e.clientY <70 && hidden)
        $("#header").css('visibility','visible');
    else if(e.clientY >70 && !hidden)
        $("#header").css('visibility','hidden');
});

    Ne sais pas si c'est la meilleure façon (testé dans les dernières versions des principaux navigateurs, mais pas pour les plus anciennes)

    Mis À Jour Le Violon

    InformationsquelleAutor T J