Ẩn tiêu đề cố định khi cuộn xuống, hiển thị khi cuộn lên và di chuột

Question

Tôi có tiêu đề cố định ẩn khi cuộn xuống và hiển thị lại khi cuộn lên, tất cả đều hoạt động như dự định. Nhưng tôi cũng muốn nó hiển thị khi bạn di chuyển vị trí của nó, bất kỳ ý tưởng?

Những gì tôi có cho đến nay:

$(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/

Answer 1

Bạn có thể thử thay đổi vị trí hàng đầu của mình thay vì:

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

Và thêm số này vào #header css:

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

Bằng cách đó bạn có thể di chuột qua biên giới dưới cùng của tiêu đề và hiển thị nó.

Hy vọng điều này phù hợp với bạn!

Answer 2

Bạn có thể thử như sau bằng cách sử dụng clientY tài sản của đối tượng sự kiện để kiểm tra vị trí của chuột so với khung nhìn.

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

Không chắc nếu điều này là cách tốt nhất (thử nghiệm trong các phiên bản mới nhất của trình duyệt chính nhưng không phải là những lâu đời nhất)

Updated Fiddle