स्क्रॉल डाउन पर फिक्स्ड हेडर छुपाएं, स्क्रॉल अप पर दिखाएं और होवर

Question

मेरे पास एक निश्चित हेडर है जो स्क्रॉल डाउन पर छुपाता है और स्क्रॉल अप पर फिर से दिखाता है, यह सब इरादे के अनुसार काम करता है। लेकिन जब आप इसे अपनी स्थिति, किसी भी विचार पर होवर करते हैं तो मैं इसे दिखाना भी चाहूंगा?

मैं अब तक क्या मिला:

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

फिडल: http://jsfiddle.net/r6kTs/

Answer 1

इसके बजाय आप अपनी शीर्ष स्थिति को बदलने की कोशिश कर सकते है:

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

और सीएसएस #header से जोड़ें:

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

इस तरह आप शीर्षलेख की निचली सीमा पर होवर कर सकते हैं और इसे दिखा सकते हैं।

आशा है कि यह आपके लिए काम करता है!

Answer 2

आप व्यूपोर्ट करने के लिए माउस रिश्तेदार की स्थिति की जांच करने घटना वस्तु की clientY संपत्ति का उपयोग कर निम्न प्रयास कर सकते हैं।

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

सुनिश्चित नहीं हैं कि अगर यह सबसे अच्छा तरीका है (प्रमुख ब्राउज़र के नवीनतम संस्करण में परीक्षण नहीं बल्कि सबसे पुराने लोगों)

Updated Fiddle