如何使固定在顶部的导航栏像非固定导航栏一样将内容向下推？

Question

如何使固定在顶部的导航栏像非固定导航栏一样将内容向下推？

javascriptjqueryhtmlcsstwitter-bootstrap

8

我希望将我的导航栏固定在顶部，并在展开折叠菜单时像静态或普通导航栏一样将内容向下推。就像这样：(https://getbootstrap.com/examples/navbar-static-top/)，但我想让导航栏固定在顶部。我之前看过这个：Navbar-fixed-top pushes content on page up，但是添加填充并没有起作用，请帮我解决这个问题 xD。

我的代码

CSS 和 HTML:

/*------------------------------------------------- Hero Image -------------------------------------------------*/

  .calltoaction {
  text-align: center;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
  }

  .calltoaction h1 {
  text-align: center;
  display: inline-block;
  font-size: 70px;
  /*text-transform: uppercase;*/
  letter-spacing: 2px;
  border: 8px solid #FFFFFF;
  border-radius: 13px;
  padding: 17px 20px;
  color: white;
  font-family: sans-serif;
  font-weight: 900;
  }

  .calltoaction h3 {
  color: #FFFFFF;
  font-size: 29px;
  text-align: center;
  }


  #hero-image {
  height: 870px;
  background: #e8eced url('http://twnateserver.no-ip.org/Pictures/taiwan-taipei.jpg') no-repeat center;
  }

  #hero-image h1 {
  margin: 215px 0 7px 0;
  }

  #hero-image h3 {
  margin: 3% 0 7px 0;
  }


  /*#hero-image a {
  margin: 3% 0 7px 0;
  }*/



/*------------------------------------------------- Hero Image -------------------------------------------------*/




/*------------------------------------------------- navbar----------------------------------------------*/
.navbar {
background-color: rgba(15, 91, 121, 0.03);
background: rgba(15, 91, 121, 0.03);
border-color: rgba(15, 91, 121, 0.03);
margin-bottom: 0px;

/*Line 4213-4217 in Bootstrap.css*/
/*Goal effect: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h*/

}

.navbar li {
color: #000;
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: rgba(233, 237, 239, 0.42);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(15, 91, 121, 0.03);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}


/*Line 4513-4574 in Bootstrap.css define the colors of navbar texts and hover colors*/


/*---------------------------------------------------------------------------------------------------------------*/

<!DOCTYPE html>
<html>

<head>
    <title>Nate</title>
 <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/index.css" rel="stylesheet">
 <script src="js/jquery-2.2.3.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <link rel='shortcut icon' type='image/x-icon' href='favicons/0.ico' />



</head>

<body>

 <!-- Fixed Top Navbar, please add middle to top fixed navbar too when you can... -->

 <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Nate's Testing Place</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
   <!-- li class="active" -> transform button to grey -->
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>&nbsp Log in</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>



 <!-- Hero Image and texts -->
 <div id="hero-image">
  <div class="calltoaction">
            <h1><b>Nate's Testing Place</b></h1>
            <h3>Just a testing site, always open but not seven-eleven...</h3>
            <!--<a href="#" class="btn btn-lg btn-info" role="button">Let's Go</a>-->
  </div>
 </div>
 <!-- Hero Image and texts -->


  <div class="containter widgetpadding">
    <div class="col-md-4 col-xs-6">
     <h4>My First Unity Game: Roller Madness (Project 2 of the coursera course)</h4>
     <a href="Test.html" class="btn btn-info" role="button">Play Roller Madness</a>
    </div>
    <div class="col-md-4 col-xs-6">
     <h4>Just a nevbar testing page, css is so tricky......</h4>
     <a href="NavTest.html" class="btn btn-info" role="button">Go to nevbar test page</a>
    </div>
    <div class="col-md-4 col-xs-6">
     <h4>Some installation info for installing Kali linux, no installation required now...</h4>
     <a href="KaliLinux.html" class="btn btn-info" role="button">Kali Linux Installation info</a>
    </div>
    <div class="col-md-4 col-xs-6">
     <h4>Text Tutorial for dual-booting Arch and Windows10 UEFI......</h4>
     <a href="Arch.html" class="btn btn-info" role="button">Arch info</a>
    </div>
    <div class="col-md-4 col-xs-6">
     <h4>Installing arch by installing Antergos is much more easier and pleasant......</h4>
     <a href="Antergos.html" class="btn btn-info" role="button">Antergos info</a>
    </div>
    <div class="col-md-4 col-xs-6">
     <h4>sdfsadfsdfsdfasdfawefregergtrhrtyhjytjtyjtyjtyjtyjtyjtyjtyjtryjtryjrtyjrtyjtyj</h4>
     <a href="ITX.html" class="btn btn-info" role="button">aetvretevtdsfv</a>
    </div>
   </div>



<!--Back to Top Widget: http://html-tuts.com/back-to-top-button-jquery/  -->
    <div class="">

    </div>
<!--Back to Top Widget-->

</body>

</html>

- Nate Lo

1

将body的padding top添加到与导航栏高度相等。如果此解决方案不起作用，请显示更多代码或您的项目fiddle。 - Germano Plebani

没有起作用。添加了原始代码。我知道这一定是我的愚蠢问题，但我就是找不出原因。谢谢帮忙。 - Nate Lo

请查看此 JSFiddle 中的代码 https://jsfiddle.net/Ldrgt5df/ 如果您想要背景图像在导航栏下面，这个代码可以实现，否则请告诉我您需要什么 :) - Germano Plebani

对我来说仍然是一样的，我看不到背景图像被推下来。我希望在折叠的导航栏展开时将整个页面向下推。像这样：(https://getbootstrap.com/examples/navbar-static-top/) - Nate Lo

你的意思是当你打开折叠菜单时，所有内容都被推下去了吗？如果你不想要这个效果，那是不可能的。 - Germano Plebani

4个回答

0

我想让我的导航栏固定在顶部，并在打开折叠菜单时像静态或普通导航栏一样将内容向下推。最近我遇到了这样的需求，下面的jquery可以帮助实现。

/* Jquery to push to content down for fixed boostrap navbars in mobile displays 
 * Replace 400px with desired value througout
 */

jQuery(function($){

$("#navbar-collapse li.expanded.active.dropdown").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
 $(this).trigger("data-attribute-changed");
});

$("#navbar-collapse li.expanded.active.dropdown").on("data-attribute-changed",function(){
if(!$(this).hasClass("open")){
 var dropdown_height=$(this).children(".dropdown-menu").height();
 var navbar_collapse_margin = parseInt($("#navbar-collapse").css("margin-top")) + dropdown_height;
 navbar_collapse_margin = navbar_collapse_margin + "px";
    $("#navbar-collapse").css("margin-top",navbar_collapse_margin);
   }
   else{
    $("#navbar-collapse").css("margin-top","400px");
   }
});

$(window).on("resize",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
 $("#navbar-collapse").css("margin-top","0px"); // Reset margin on resize
});

$("button.navbar-toggle").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
 $("#navbar-collapse").css("margin-top","0px"); // Dealing with regular displays
else
 $("#navbar-collapse").css("margin-top","400px"); 
});

});

- sjsam

0

添加

body {
    min-height: 2000px;
    padding-top: 70px; /*70px nabar height*/
}

查看Bootstrap示例

实时示例在这里

- Ismail Farooq

-1

导航栏在bootstrap.css的第4169行有一个最小高度为50像素的规则。

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

所以对于导航菜单后面的 div，设置至少 50px 的 margin-top，它就应该正常工作了。

- Dhaval Chheda

这只是将固定顶部导航栏向下移动，但下面的内容仍然不会被推下去。无论如何感谢您的回答:D - Nate Lo

你把上边距应用到了导航栏下面的 div 上，对吧？ - Dhaval Chheda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4607402 · Accepted Answer

如果padding对你无效，请尝试在<nav>上使用以下方法：

nav.navbar-fixed-top {
  position:fixed;
  top:0;
}

然后以下是 <body> 的内容：

body::before {
  display:block;
  content: '';
  height:60px; /* or whatever */
}