У меня действительно странное поведение при тестировании страницы в браузере iPhone Safari.
После того, как меню (navbar) задано с классом CSS с помощью javascript, стиль не применяется
Панель навигации должнабыть немного ниже верхнего угла дисплея, но при прокрутке он должен придерживаться вершины.Так что это липкая навигационная панель.
Решение сделано с помощью javascript, запущенного в нижнем колонтитуле готового документа.И он добавляет класс CSS к идентификатору панели навигации - он называется «sticky»
CSS:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
JS
var navbar = document.getElementById("mainNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
offset taken by:
$('body').scrollspy({
target: '#mainNav',
offset: 75
});
. Он работает на ноутбуке без каких-либо проблем (CHrome, Safari ...). Он добавляет класс и выполняет свою работу.Навбар привязан к вершине.
На iPhone также добавлен класс «липкий».Но, как видно из инспектора, фактический стиль не применяется.
Таблица стилей загружена правильно, хотя ...
Что происходит?