Điều hướng Biến mất trong Chrome sau khi cuộn và nhấp vào

Question

Tôi đang làm việc trên một trang web nhỏ cho Ứng dụng Android tôi đang phát hành, nhưng tôi có một vấn đề nhỏ mà dường như tôi không thể tìm thấy câu trả lời. Trong Firefox, mọi thứ hoạt động bình thường nhưng khi bạn cuộn và sau đó nhấp vào liên kết điều hướng (chỉ cần sử dụng id để di chuyển xuống trang) nhưng trên Chrome, điều hướng sẽ biến mất cho đến khi bạn cuộn thêm một số thứ khác.

Trang web này là tại www.ioudebtcalculator.com

Đây là những phong cách duy nhất tôi đã áp dụng:

#navBar { 
    background-color:#000; 
    position:fixed; 
    width:100%; 
    font-family:sans-serif; 
    font-weight:bold; 
    font-size:13pt; 
    height:70px; 
} 

Edit: Tôi có kể từ khi loại bỏ các vị trí cố định từ thanh điều hướng trên trang web, do đó bạn sẽ không còn thấy vấn đề ở đó. Vấn đề vẫn chưa được giải quyết.

Bạn có thể dễ dàng thêm vị trí cố định vào phần tử navBar bằng cách sử dụng Công cụ nhà phát triển hoặc bất kỳ công cụ tương đương nào khác để xem sự cố.

Answer 1

nó làm việc cho tôi khi thêm này để navbar css của bạn

-webkit-transform: translateZ(0); 

làm cho nó

#navBar { 
    background-color: #000; 
    width: 100%; 
    position: fixed; 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 14pt; 
    height: 70px; 
    -webkit-transform: translateZ(0); 
    z-index: 1; 
    box-shadow: 0 2.5px 20px #000; 
} 

Answer 2

Tôi không biết có gì sai. Nhưng tôi sẽ ném ra dự đoán tốt nhất của tôi vì không ai trả lời được.

Các hình sau đây giống như một ứng cử viên tốt cho hành vi screwy:

function switchTabs(e) { 
    $('a#currentTab').removeAttr('id'); 
    $(e).children('a').attr('id','currentTab'); 
} 

id là một tài sản không phải là một thuộc tính, và thêm và loại bỏ id có vẻ như là một ý tưởng thực sự xấu vì đó là cách các yếu tố trong DOM là duy nhất xác định. Đó là điều tôi sẽ không làm phiền. Thêm vào đó nó rất dễ dàng để tái tạo chức năng mong muốn với các lớp:

function switchTabs(e) { 
    $('a.currentTab').removeClass('currentTab'); 
    $(e).children('a').addClass('currentTab'); 
} 

Có lẽ tôi đã gặp may?

Answer 3

Nó có thể là benefitial sử dụng một cuộn:

Điều này sẽ làm cho nó userfriendly hơn bởi vì nó là gracefull và vấn đề (Tôi tưởng tượng) là trong thực tế là Chrome không đăng ký thay đổi vị trí vì hiện tại phương pháp.

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
}); 

Answer 4

Bạn nên thêm top: 0 vào phần tử của mình. Điều đó sẽ căn chỉnh nó lên đầu trang bất kể là gì. Bạn có thể cần phải thêm đệm vào đầu của trình bao bọc nội dung để nó không bao giờ được bao phủ bởi nav.

Answer 5

Hãy thay thế css của bạn sử dụng mã dưới đây

nav { 
     background: none repeat scroll 0 0 #000000; 
     display: block; 
     position: absolute; 
     margin-left: 115px !important; 
     float: left; 
     height: 70px; 
     margin-left: 10%; 
     width: 40%; 
    } 

Answer 6

Tôi chỉ cần thêm hai điều cả trong Chrome và Firefox và nó hoạt động tốt. Tôi nhấp vào liên kết và cuộn một chút quá, nav vẫn như mong đợi của nó.

For #navBar 
position: fixed; 

For #wrapper 
padding-top: 70px;