2014-07-15 12 views
6

Ich habe eine feste Kopfzeile, die sich bei Scrollen nach unten verbirgt und beim Scrollen wieder nach oben zeigt, das alles funktioniert wie vorgesehen. Aber ich würde es auch gerne sehen, wenn du seine Position schwebst, irgendwelche Ideen?Fixe Kopfzeile ausblenden, nach unten scrollen, nach oben scrollen und schweben

Was ich so weit gekommen:

$(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; 
}); 
}); 

Fiddle: http://jsfiddle.net/r6kTs/

Antwort

5

Sie können versuchen, stattdessen seine Spitzenposition ändern:

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

und fügen Sie diese CSS #header:

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

Auf diese Weise können Sie den Mauszeiger über den unteren Rand der Kopfzeile bewegen und es anzeigen.

Hoffe, das funktioniert für Sie!

+2

Gute Idee, funktioniert wie vorgesehen! Ich habe die Rahmengröße etwas erhöht, um die Aktivierung zu erleichtern und die Grenze transparent zu machen. http://jsfiddle.net/uAc3p/5/ Danke – oscarpas

0

Sie können die versuchen, die clientY Eigenschaft des Ereignisobjekts folgenden anhand der Position der Maus relativ zum Ansichtsfenster zu überprüfen.

$(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'); 
}); 

Nicht sicher, ob dies der beste Weg (in aktuellen Versionen der gängigen Browser getestet, aber nicht die ältesten) ist

Updated Fiddle

Verwandte Themen