如何禁用在固定位置滚动的背景内容

How to disable content scrolling behind fixed position ?

如何禁用固定位置后面的内容滚动?

Demo http://jsfiddle.net/k6sk4a0L/4/

.navbar-default {
  background-color: #4c68f9;
  margin-bottom: 0;
  border: none;
}
.navbar-default.affix {
  background-color: #4762ed;
  margin: auto;
  right: 0;
  left: 0;
  transition: all .6s ease-in-out;
}
.navbar-default.affix + .container {
  padding-top: 70px;
}
.navbar-default .nav-property,
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: #fff;
  font-weight: bold;
  padding: 30px 20px;
}
.navbar-default .navbar-brand {
  font-size: 32px;
}
.navbar-default .navbar-brand:hover {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .navbar-default .navbar-nav {
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 80px;
  }
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li {
    padding: 10px;
  }
}
.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li.active a:hover {
  background-color: transparent;
  color: #fff;
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li.active a:after,
  .navbar-default .navbar-nav > li.active a:hover:after {
    width: calc(100% - 20px);
  }
}
.navbar-default .navbar-nav > li > a {
  font-size: 18px;
  font-weight: 500;
  padding: 20px 10px 10px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 30px;
    padding: 20px 10px;
  }
}
.navbar-default .navbar-nav > li > a:after {
  content: "";
  height: 2px;
  width: 0;
  background-color: #fff;
  transition: all .2s ease-in-out;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover:after,
.navbar-default .navbar-nav > li > a:focus:after {
  width: calc(100% - 20px);
}
.navbar-default .navbar-toggle {
  border: none;
  margin-top: 20px;
  z-index: 999;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
  height: 3px;
  width: 30px;
  background-color: #fff;
  transition: all .2s;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.navbar-default .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 5px;
}
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-4px);
  -ms-transform: rotate(45deg) translateX(0) translateY(-4px);
  -o-transform: rotate(45deg) translateX(0) translateY(-4px);
  transform: rotate(45deg) translateX(0) translateY(-4px);
}
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
  opacity: 0;
}
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:last-child {
  -webkit-transform: rotate(-45deg) translateX(-1px) translateY(3px);
  -ms-transform: rotate(-45deg) translateX(-1px) translateY(3px);
  -o-transform: rotate(-45deg) translateX(-1px) translateY(3px);
  transform: rotate(-45deg) translateX(-1px) translateY(3px);
}
.navbar-default .navbar-collapse {
  transition: all .5s ease-in-out;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(76, 104, 249, 0.95);
  border: none;
  z-index: 99;
  margin: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  /*&.collapsing{
  	height: 0 !important;
  	opacity: 0;
  }*/
}
.navbar-default .navbar-collapse.collapse.in {
  bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="1">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam minus est aliquid tempore hic placeat eligendi corrupti! Aspernatur sint fuga minima, assumenda quo, obcaecati recusandae dolores sequi, eum culpa dicta!</h3>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus laborum dignissimos blanditiis nostrum at quibusdam neque eum iusto, excepturi cupiditate voluptatibus ipsum, distinctio dolores, quis deleniti architecto libero iure suscipit.</h2>
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim laboriosam repellendus, tempore fugiat, eveniet dolorem quas error. Enim officiis, recusandae, dolorum sed ad fugit voluptas atque adipisci aut tempora, reprehenderit.</h1>
  <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo omnis corporis, minima modi quasi est facilis quo vel vitae labore provident, impedit nostrum excepturi molestiae velit repellendus libero rerum numquam.</h3>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ab, explicabo in enim eveniet, qui voluptatem, fugit culpa optio fugiat veniam eos delectus harum! Sequi similique quos a minus expedita.</h2>
</div>

3 个解决方案

#1

hi i know what i have given is the one kind of hack we can say to crack our problem

嗨,我知道我所提供的是我们可以说的一种破解我们问题的黑客行为

NOTE : there is might problem with navigation class manipulation first time page loads so please look around it

注意:导航类操作第一次加载页面可能有问题,所以请环顾四周

here is my hack for your problem using jquery

这是我使用jquery解决你的问题

because when you have opened you navigation you might not probably work with your back-end body content keeping this thing in my mind i have applied this approach please look out in fiddle

因为当你打开导航时你可能不会使用你的后端身体内容保持这个东西在我的脑海里我已经应用这种方法请注意小提琴

$(document).ready(function(){
    $('body').addClass('hiddenApply');
    $('.navbar-toggle').on('click',function(){
       debugger;
       if($(this).attr('aria-expanded') === "false"){
           $('body').addClass('hiddenApply');
       }else{
	       $('body').removeClass('hiddenApply');
       }
    });    
})

.navbar-default {
  background-color: #4c68f9;
  margin-bottom: 0;
  border: none;
}
.navbar-default.affix {
  background-color: #4762ed;
  margin: auto;
  right: 0;
  left: 0;
  transition: all .6s ease-in-out;
}
.navbar-default.affix + .container {
  padding-top: 70px;
}
.navbar-default .nav-property, .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a {
  color: #fff;
  font-weight: bold;
  padding: 30px 20px;
}
.navbar-default .navbar-brand {
  font-size: 32px;
}
.navbar-default .navbar-brand:hover {
  color: #fff;
}
@media screen and (max-width: 767px) { 
  .navbar-default .navbar-nav {
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 80px;
  }
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li {
    padding: 10px;
  }
}
.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li.active a:hover {
  background-color: transparent;
  color: #fff;
}
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li.active a:after,
  .navbar-default .navbar-nav > li.active a:hover:after {
    width: calc(100% - 20px);
  }
}
.navbar-default .navbar-nav > li > a {
  font-size: 18px;
  font-weight: 500;
  padding: 20px 10px 10px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 30px;
    padding: 20px 10px;
  }
}
.navbar-default .navbar-nav > li > a:after {
  content: "";
  height: 2px;
  width: 0;
  background-color: #fff;
  transition: all .2s ease-in-out;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover:after, .navbar-default .navbar-nav > li > a:focus:after {
  width: calc(100% - 20px);
}
.navbar-default .navbar-toggle {
  border: none;
  margin-top: 20px;
  z-index: 999;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
  height: 3px;
  width: 30px;
  background-color: #fff;
  transition: all .2s;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.navbar-default .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 5px;
}
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-4px);
  -ms-transform: rotate(45deg) translateX(0) translateY(-4px);
  -o-transform: rotate(45deg) translateX(0) translateY(-4px);
  transform: rotate(45deg) translateX(0) translateY(-4px);
}
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
  opacity: 0;
}
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:last-child {
  -webkit-transform: rotate(-45deg) translateX(-1px) translateY(3px);
  -ms-transform: rotate(-45deg) translateX(-1px) translateY(3px);
  -o-transform: rotate(-45deg) translateX(-1px) translateY(3px);
  transform: rotate(-45deg) translateX(-1px) translateY(3px);
}
.navbar-default .navbar-collapse {
  transition: all .5s ease-in-out;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(76, 104, 249, 0.95);
  border: none;
  z-index: 99;
  margin: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  /*&.collapsing{
  	height: 0 !important;
  	opacity: 0;
  }*/
}
.navbar-default .navbar-collapse.collapse.in {
  bottom: 0;
}
.hiddenApply{
    overflow:hidden;
}

<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="1">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam minus est aliquid tempore hic placeat eligendi corrupti! Aspernatur sint fuga minima, assumenda quo, obcaecati recusandae dolores sequi, eum culpa dicta!</h3>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus laborum dignissimos blanditiis nostrum at quibusdam neque eum iusto, excepturi cupiditate voluptatibus ipsum, distinctio dolores, quis deleniti architecto libero iure suscipit.</h2>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim laboriosam repellendus, tempore fugiat, eveniet dolorem quas error. Enim officiis, recusandae, dolorum sed ad fugit voluptas atque adipisci aut tempora, reprehenderit.</h1>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo omnis corporis, minima modi quasi est facilis quo vel vitae labore provident, impedit nostrum excepturi molestiae velit repellendus libero rerum numquam.</h3>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ab, explicabo in enim eveniet, qui voluptatem, fugit culpa optio fugiat veniam eos delectus harum! Sequi similique quos a minus expedita.</h2>
</div>

here is the fiddle you can check out though there is some problem i want to give the approach.

这里是你可以查看的小提琴虽然有一些问题我想给出这个方法。

Check out

#2

I think you don't wish to overlap your bottom body content with your navigation-bar text (which is fixed) when page scrolls, if that's the case then add class 'navbar-fixed-top' to your nav tag like below -

我认为您不希望在页面滚动时将您的底部正文内容与导航栏文本(已修复)重叠,如果是这种情况,则将类“navbar-fixed-top”添加到您的导航标记,如下所示 -

<nav class="navbar navbar-default navbar-fixed-top">

add some padding in body to make content start in beginning from the below of navbar -

在正文中添加一些填充以使内容从导航栏的下方开始 -

body { padding-top: 60px; }

#3

Just remove style bottom: 100%; in your CSS class .navbar-default .navbar-collapse.

只需删除样式底部:100%;在你的CSS类.navbar-default .navbar-collapse中。

If you want set height of navbar, remove the style height: 100%; because it was overridden by Bootstrap. Use height: 60px !important instead.

如果要设置导航栏的高度,请删除样式高度:100%;因为它被Bootstrap覆盖了。使用高度:60px!重要。