Как изменить положение липкого верха на больших устройствах на фиксированный верх на маленьких устройствах в навигационной панели Bootstrap 4?

Question

Не могли бы вы сказать мне, если есть какой-нибудь способ изменить положение моей навигационной панели с липкого верха на больших устройствах на фиксированный верх на небольших устройствах.

<nav id="menu" class="navbar sticky-top navbar-expand-md navbar-dark bg-dark">

Answer 1

Вы можете использовать медиазапросы CSS для таргетинга на небольших устройствах.

Добавьте это в свою таблицу стилей, она должна сделать свою работу. Убедитесь, что ваша таблица стилей добавлена ​​ниже вашего файла bootstrap.css.

// Small devices
@media (max-width: 767px) { 

  #menu sticky-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
}

Answer 2

Это можно сделать с помощью javascript.
Во-первых, удалите класс sticky top из элемента navbar

, чтобы он выглядел следующим образом:

<nav id="menu" class="navbar navbar-expand-md navbar-dark bg-dark">

А затем добавьте этот скрипт в ваш тег head, чтобы этот скрипт загружался с Domcontent.

var width = window.screen.width;
var nav = document.getElementById('menu');
if(width < 768){
    if(nav.hasClass('sticky-top')){
        nav.classList.remove("sticky-top");
    }
    nav.classList.add("fixed-top");
}
else{
    if(nav.hasClass('fixed-top')){
        nav.classList.remove("fixed-top");
    }
    nav.classList.add('sticky-top');
}

Надеюсь, он вам помог