Nawigacja Znikająca w przeglądarce Chrome po przewinięciu i kliknięciu

Question

Pracuję nad małą witryną aplikacji na Androida, którą wypuszczam, ale mam mały problem, na który nie mogę znaleźć odpowiedzi.

W przeglądarce Firefox wszystko działa poprawnie, ale po przewinięciu i kliknięciu linku nawigacyjnego (po prostu za pomocą identyfikatora przesuwa się w dół strony), ale w przeglądarce Chrome nawigacja znika, dopóki nie przewiniesz więcej.

Witryna jest gotowy na www.ioudebtcalculator.com

Są to jedyne style Mam stosowane:

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

Edit: I od tego czasu usunięto pozycję ustaloną z NavBar na stronie internetowej, dzięki czemu nie będzie dłużej widzisz tam problem. Problem nie został jeszcze rozwiązany.

Możesz łatwo dodać pozycję ustaloną do elementu navBar za pomocą Narzędzi dla programistów lub dowolnego innego równoważnego narzędzia, aby zobaczyć problem.

Answer 1

to działa na mnie podczas dodawania tego do NavBar css

-webkit-transform: translateZ(0); 

czyni go

#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

Nie mam pojęcia, co jest nie tak. Ale zamierzam wyrzucić moje najlepsze przypuszczenia, ponieważ nikt jeszcze nie odpowiedział.

Poniższe wygląda jak dobrym kandydatem do screwy zachowań:

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

id jest nie własność atrybutem oraz dodawanie i usuwanie identyfikatorów wydaje się to naprawdę zły pomysł, ponieważ jest to w jaki sposób elementy DOM są wyjątkowo zidentyfikowane. To coś, z czym nie chciałbym się pogodzić. Poza tym łatwo jest odtworzyć pożądaną funkcjonalność w klasach:

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

Może mam szczęście?

Answer 3

To może być benefitial użyć zwój:

ten będzie bardziej przyjazny dla użytkownika, ponieważ jest gracefull i problem (I wyobrazić) polega na tym, że Chrome nie rejestruje zmianę pozycji ze względu na prąd metoda.

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

Answer 4

Powinieneś dodać top: 0 do swojego elementu. To dostosuje ją do górnej części strony, bez względu na wszystko. Może być konieczne dodanie dopełnienia do górnej części opakowania zawartości, tak aby nigdy nie było objęte nawigacją.

Answer 5

Proszę wymienić css za pomocą poniższego kodu

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

Właśnie dodałem dwie rzeczy zarówno w przeglądarce Chrome, jak i Firefox i działało dobrze. Kliknąłem link i nieco przewinąłem, nav pozostaje tak, jak się spodziewano.

For #navBar 
position: fixed; 

For #wrapper 
padding-top: 70px;