Панель навигации Bootstrap4 вызывает проблему для jQuery parallax.js ?

#javascript #html #jquery #css #bootstrap-4

#javascript #HTML #jquery #css #bootstrap-4

Вопрос:

Прежде всего, я действительно не знаю, как описать мою проблему. Итак, я прошу вас проверить мою игровую площадку JSFiddle Code в начале.

https://jsfiddle.net/coming123/q46tjuev/

Чтобы увидеть проблему, я хочу, чтобы вы запустили эту игровую площадку с малой шириной. Затем нажмите на «navbar-toggler» в левом верхнем углу, который предоставляется самим Bootstrap4 и немного разработан мной. При нажатии на нее панель навигации будет отображаться сверху вниз с правой стороны. Проблема появляется на этом этапе.

Из-за этой панели навигации фон становится выше, а остальное содержимое перемещается в нижнюю часть. Прокрутите страницу, и вы увидите появившуюся ошибку. фон стал выше, но эффект параллакса был нарушен. Теперь вы должны изменить размер области, потянув или нажав с боков. Небольшое изменение размера исправит эту ошибку. Чего я боюсь, так это того, что на мобильных телефонах вы не можете изменить размер браузера. Таким образом, ошибка не будет исправлена. Также я не хочу, чтобы это было исправлено таким образом. Я не понял, почему возникает эта проблема.

Я пытался перезагрузить div при нажатии кнопки переключения панели навигации, но ничего не было исправлено.

 document.querySelector("button").addEventListener("click", () => {
var container = document.getElementsByClassName("top");
var content = container.innerHTML;
container.innerHTML= content;  
console.log("Done");
});
  

Есть предложения?