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

时间：2015-08-21 09:13:02

标签： html css css3 css-position z-index

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

演示http://jsfiddle.net/k6sk4a0L/4/

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

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

注意：第一次加载导航类操作可能会出现问题，所以请环顾四周

这是我使用jquery

解决你的问题的方法

因为当你打开导航时你可能不会使用你的后端正文内容保持这个东西在我的脑海里我已经应用了这种方法请小心翼翼地看着

$(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>

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

Check out

答案 1 :(得分：0)

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

body { padding-top: 60px; }

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

{{1}}

答案 2 :(得分：0)

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

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

相关问题
最新问题