Question

是否可以将导航栏移动到第一个顶栏下面，这样我首先会看到带徽标的栏，然后导航？

Answer 1

使用JQuery：

<强> HTML 在我的示例<nav id="navbar" class="navbar navbar-default">

中为您的导航栏添加ID

<强> JQUERY

var logoBarHeight = $('.logo-bar').height();

$(document).on('scroll', function() { 
  if($(document).scrollTop() > logoBarHeight){
    $('#navbar').addClass('navbar-fixed-top');
  } else {
    $('#navbar').removeClass('navbar-fixed-top');
  }
});

Answer 2

通过添加到您的CSS来尝试此操作

#navbar{ margin-top: 106px;}

 .container-fluid.logo-bar{
    position: fixed;
    top: 0;
    z-index: 99;
    background: #fff;
    left: 0;
    right: 0;
}

并更改此图片样式

<img src="http://yr-neu.nowcommu.myhostpoint.ch/img/bg_3.png" class="special" style="
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
">

Bootstrap：在徽标栏下移动导航栏

2 个答案: