Класс CSS, сгенерированный javascript, не применяет стиль - PullRequest
0 голосов
/ 24 сентября 2019

У меня действительно странное поведение при тестировании страницы в браузере 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 также добавлен класс «липкий».Но, как видно из инспектора, фактический стиль не применяется.

Таблица стилей загружена правильно, хотя ...

Что происходит?

1 Ответ

0 голосов
/ 25 сентября 2019

Эта проблема может быть закрыта, так как она была «решена» iPhone, очищает его кеш.

По требованию и многократная очистка кеша в настройках не помогла в первый раз при кодировании.Наконец, истечение срока действия внутренне вынудило iOS / Safari по-настоящему перезагрузить содержимое.

Работает успешно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...