如何在Bootstrap 4导航栏中将大型设备上的粘顶位置更改为小型设备上的粘顶位置？

Question

您能告诉我是否有什么方法可以将导航栏的位置从大型设备上的粘性顶部更改为小型设备上的固定顶部。

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

Answer 1

可以使用javascript完成。
首先，从导航栏元素中删除粘性顶级类

因此，它应该看起来像这样：

<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');
}

我希望它对您有帮助

Answer 2

您可以使用CSS媒体查询来定位小型设备。

将其添加到样式表中，即可完成工作。确保将样式表添加到bootstrap.css文件下方。

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

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