Làm thế nào để ẩn/thanh chương nav khi người dùng cuộn lên/xuống

Question

Ẩn/hiển thị thanh nav khi người dùng cuộn lên/xuống

Dưới đây là ví dụ tôi đang cố gắng để đạt được: http://haraldurthorleifsson.com/ hoặc http://www.teehanlax.com/story/readability/

Thanh điều hướng trượt lên khỏi màn hình khi bạn cuộn xuống và trượt xuống màn hình khi bạn cuộn lên. Tôi đã tìm ra cách để làm điều đó với fade in/fade out nhưng tôi muốn đạt được nó với các hình ảnh động chính xác giống như trong ví dụ. Lưu ý: Tôi đã cố gắng SlideIn() và giống như cách mà nó làm phim hoạt hình kéo dài ...

jQuery:

var previousScroll = 0, 
headerOrgOffset = $('#header').offset().top; 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').fadeOut(); 
     } else { 
      $('#header').fadeIn(); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

CSS:

#header { 
    width: 100%; 
    z-index: 100; 
} 

.fixed { 
    position: fixed; 
    top: 0; 
} 

#header-wrap { 
    position: relative; 
} 

HTML:

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav> 
      <h1>Prototype</h1> 
     </nav> 
    </div> 
</div> 

Answer 1

Bạn đã thử hoạt ảnh chưa? nhưng thay thế -60px bằng chiều cao của thanh điều hướng. Nhưng tiêu cực.

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').animate({ 
       top: '-60px'  //Change to Height of navbar 
      }, 250);    //Mess with animate time 
     } else { 
      $('#header').animate({ 
       top: '0px' 
      },250); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 2

Để có được nội dung bên trong của nav để trượt lên thay vì được dần dần ẩn, bạn cần phải làm những hình ảnh động trên các yếu tố phụ huynh, và giữ các yếu tố nội tại ở dưới cùng của cha mẹ, như vậy:

jsfiddle

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav><h1>Prototype</h1>another line<br/>another line 
     </nav> 
    </div> 
</div> 

css

body { 
    height: 1000px; 
} 

#header { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
} 

#header-wrap { 
    width: 100%; 
    position: fixed; 
    background-color: #e0e0e0; 
} 

js

var previousScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
     } else { 
      $('#header-wrap').slideDown(); 
     } 
    } else { 
      $('#header-wrap').slideDown(); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 3

Dù navbar yếu tố bạn sử dụng, nó phải bao gồm một transition: transform 0.3s vào nó, và một cơ sở transform của 0.

#navbar { 
    position: fixed; 
    right: 0; left: 0; top: 0; 
    /* your height */ 
    height: 40px; 
    /* .... */ 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform .3s; 
    -moz-transition: -moz-transform .3s; 
    -o-transition: transform .3s; 
    transition: transform .3s; 
} 
#navbar.scrolled { 
    /* subtract your height */ 
    -webkit-transform: translate3d(0,-40px,0); 
    -moz-transform: translate3d(0,-40px,0); 
    transform: translate3d(0,-40px,0); 
} 

Sau đó javascript của bạn cần phải xem di chuyển của người dùng:

;(function(){ 
    var previousScroll = 0; 
    var navbar = document.getElementById('navbar'), 
     navClasses = navbar.classList; // classList doesn't work <IE10 

    window.addEventListener('scroll', function(e){ 
     var currentScroll = window.scrollY; 
     var isDown = currentScroll > previousScroll; 

     if (isDown && !navClasses.contains('scrolled')){ 
      // scrolling down, didn't add class yet 
      navClasses.add('scrolled'); // we hide the navbar 
     } else if (!isDown){ 
      // scrolling up 
      navClasses.remove('scrolled'); // won't error if no class found 
     } 

     // always update position 
     previousScroll = currentScroll; 
    }); 
}()); //run this anonymous function immediately 

Answer 4

Thử jroom khoảng không.

Ngoài ra, bạn có thể chỉnh sửa các lớp CSS và triển khai hiệu ứng chuyển tiếp.

http://wicky.nillia.ms/headroom.js