Thanh điều hướng dính nhấp nháy khi đến cuối trang

Question

Gần đây tôi đã đi thanh điều hướng của tôi để hoạt động như một thanh điều hướng dính tuân thủ đầu trang của tôi sau khi tôi cuộn xuống một điểm nhất định, tuy nhiên, khi tôi chạm đáy trang của tôi toàn bộ thanh điều hướng nhấp nháy, và thậm chí biến mất đôi khi. Hãy nghĩ về nó như một chiếc TV cũ sẽ nhấp nháy và bạn sẽ kết thúc đánh vào một bên để ngăn chặn sự nhấp nháy. Làm thế nào tôi sẽ nhấn thanh nav của tôi để ngăn chặn nó từ nhấp nháy. Here là trang web của tôi để bạn có thể chứng kiến ​​tất cả vinh quang của nhấp nháy.

Đây là HTML của tôi cho nav:

<div id="nav-wrapper"> 
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix"> 
    <div class="navbar-inner" data-spy="affix-top"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#service-top">Services</a></li> 
      <li><a href="#contact-arrow">Contact</a></li> 
     </ul><!--/.nav--> 
     </div><!--/.nav-collapse collapse pull-right--> 
    </div><!--/.container--> 
    </div><!--/.navbar-inner--> 
</div><!--/#nav /.navbar navbar-inverse--> 
</div><!--/#nav-wrapper--> 

Và đây là JS của tôi:

<script> 
    $(document).ready(function() { 
     $('#nav-wrapper').height($("#nav").height()); 
     $('#nav').affix({ 
      offset: 675 
     }); 
    }); 
</script> 

Một lưu ý quan trọng nên được rằng điều này chỉ bắt đầu xảy ra sau khi tôi thay đổi bù đắp trong JS của tôi từ offset: $('#nav').position() đến offset: 675. Bạn có thể nói, cũng chỉ cần thay đổi nó trở lại, nhưng với sự bù đắp cũ, nav dính của tôi sẽ nhảy sớm đến đỉnh.

Cảm ơn bạn đã giúp đỡ về đầu vào bạn có thể cung cấp cho tôi!

Answer 1

Trang web của bạn có vẻ ổn với tôi ngay bây giờ, nhưng tôi đã được đưa đến đây tìm kiếm giải pháp cho cùng một vấn đề, vì vậy tôi nghĩ tôi sẽ thêm trải nghiệm của mình tại đây.

Vấn đề tôi gặp phải là mã liên kết áp dụng một lớp (ví dụ: affix hoặc affix-bottom) vào phần tử được gắn dựa trên vị trí thẳng đứng của nó trên trang. Tôi sẽ gọi những 'khu' này.

Nếu CSS cho lớp mới sao cho nó di chuyển phần tử được gắn theo chiều dọc, nó có thể kết thúc ngay lập tức trong một khu vực khác nhau, do đó lớp đó bị xóa. ... Vị trí do đó thay thế với mọi sự kiện onscroll và nhấp nháy.

Chìa khóa cho tôi là đảm bảo rằng các giá trị data-offset-top/data-offset-bottom và các lớp CSS và được thiết lập sao cho phần tử không còn di chuyển theo chiều dọc khi các nút bật lên. I E. Một cái gì đó như:

<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300"> 
    ... 
</div> 

(Các data-offset-bottom là để lắp lại nguyên tố này để nó không đâm vào ví dụ như một chân cao, và sẽ không phải luôn luôn cần thiết.) Và sau đó:

.someClass.affix { 
    /* position: fixed; already applied in .affix */ 
    top: 10px; 
    /* might also need e.g. width: 300px; as position: fixed; removes the element from its parent. */ 
} 
.someClass.affix-bottom { 
    position: absolute; /* Start scrolling again. */ 
    top: auto; /* Override the top position above. */ 
    bottom: 20px; /* It should stop near the bottom of its parent. */ 
} 

Đôi khi bước nhảy khi các lớp CSS được thay đổi sẽ đẩy phần tử thêm vào vùng mà nó đang nhập, dẫn đến một 'flick' đơn lẻ ở ranh giới, nhưng không lặp lại nhấp nháy.

N.B. Tôi nghĩ rằng bước nhảy nhẹ khi menu của bạn trở nên cố định có thể được làm mịn theo cách này, bằng cách điều chỉnh rất nhỏ đến vị trí thẳng đứng của phần tử khi được gắn, và/hoặc bằng cách đặt data-offset-top thành một số giá trị thích hợp.

Chúc mừng,

Leo

Answer 2

Vấn đề đối với tôi là nội dung trang web của tôi là nhỏ hơn so với trình đơn của tôi, vì vậy khi menu đã được thay đổi đến vị trí cố định nó gây ra trang để thu hẹp.Tôi đặt nội dung chiều cao tối thiểu bằng (coffeescript):

$ -> 
    $('.content').css('min-height', -> 
    $('.bs-docs-sidebar').height()) 

Và mọi thứ hoạt động như một sự quyến rũ.

Answer 3

trả lời từ này Bootstrap 3 Fixed Top Navbar...

Chỉ cần thêm dòng sau vào .navbar

.navbar 
{ 
    -webkit-backface-visibility: hidden; 
} 

Answer 4

Chỉ cần thêm này đến lớp CSS của bạn.

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }