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

Question

如何禁止内容在固定位置后滚动？

.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>

Answer 1

我认为您不希望在页面滚动时将底部正文内容与导航栏文本（固定的）重叠，如果是这种情况，请将 class 'navbar-fixed-top' 添加到你的导航标签如下 -

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

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

body { padding-top: 60px; }

Answer 2

只需删除 CSS class .navbar-default .navbar-collapse.

中的样式 bottom: 100%;

如果要设置导航栏的高度，请删除样式 height: 100%;，因为它已被 Bootstrap 覆盖。请改用 height: 60px !important。

Answer 3

嗨，我知道我所提供的是一种可以解决我们问题的 hack

注意：第一次加载页面时导航 class 操作可能存在问题，因此请四处查看

这是我使用 jquery

解决你的问题的方法

因为当您打开导航时，您可能无法使用您的后端正文内容 请牢记这一点我已经应用了这种方法请注意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>

这是 fiddle 你可以查看，但我想提供一些问题。

Check out

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

How to disable background content scrolling in position fixed

html

css

css-position

z-index