侧边栏不占空间，Bootstrap 4 黏性侧边栏

Question

你好，最近我使用了Bootstrap 4的offcanvas模板来构建我的网站。

http://v4-alpha.getbootstrap.com/examples/offcanvas/#

现在我想让我的侧边栏跟随用户滚动，但是Bootstrap移除了affix类，并建议使用CSS position sticky。我尝试这样做并针对侧边栏进行定位，但它会破坏布局。针对.nav也不起作用。

Html

<div class="container-fluid header navbar-fixed-top">        
    <div class="row">
           <div class="hidden-md-up col-xs-2">
                <button type="button" class="btn btn-secondary" data-toggle="offcanvas"><i class="fa fa-bars"></i></button>
           </div>

           <div class="col-md-12 col-sm-8 col-xs-8">                        
                <img src="images/logo.gif" class="img-fluid center-block" alt="emblem">                        
           </div>
    </div>   
</div><!-- /HEADER -->

<div class="container-fluid">
    <div class="row row-offcanvas row-offcanvas-left">

        <div class="col-md-2 col-sm-2 col-xs-4 sidebar-offcanvas" id="sidebar">
            <ul class="nav nav-stacked">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#area">Locations</a>     
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#deals">Deals</a>     
                </li>                   
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Us</a>
                </li>
            </ul>
        </div><!-- /Navigation -->


            <section id="home">
                <div class="row">

                    <div class="col-md-6 col-md-offset-5 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                        <img src="images/mazda2.gif" alt="Mazda2" class="img-fluid center-block">
                    </div>

                    <div class="col-md-6 col-md-offset-5 col-xs-12 text-xs-center">                        
                        <h3>Perth, Western Australia</h3>                           
                    </div>

                </div>
            </section><!-- HOME -->

            <section id="about">
                <div class="about-me">
                    <h3>About Us</h3>

                </div>
            </section><!-- ABOUT -->

    </div><!--ROW -->       
</div><!-- CONTAINER-FLUID -->

CSS

 /*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
  padding-top: 7em;
  position: relative;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

   .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
  left: -33%; /* 4 columns */
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -33%; /* 4 columns */
  }

  .row-offcanvas-left.active {
     left: 33%; /* 4 columns */
   }

   .row-offcanvas-right.active {
     right: 33%; /* 4 columns */
   }

   .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 33%; /* 4 columns */

  }
}

/*
  * Custom Style
  * --------------------------------------------------
  */

  #sidebar {
    background-color: white;
    position:absolute;
    height:100vh;
 }

  .header {
     background-color: #232323;
 }

 .btn-secondary {
     background-color: #232323;
     border-color: #232323;
     margin-top:0.3em;
 }

 /*
  * HOME
  */

 #home {
   background-color: #434343;
   height: 100vh;
   width: 100vw;
 }

这可能与我的侧边栏-off画布和侧边栏位置有关。但是没有绝对的侧边栏位置，我的部分内容就会被推下去。我尝试删除它并使用col-x-x类，但还是不行 :(

- J Doe

---

我正在考虑在侧栏上使用媒体查询和固定位置，但感觉有点像是一种hack，谁知道我是否会遇到其他问题；( - J Doe

Answer 1

我认为你应该使用：

@media screen and (min-width: 768px) {
  .sidebar-offcanvas .nav-stacked {
   position: fixed;
   top: 8em;
   width: 33%;
  } 
}

了解更多关于position: fixed的内容，请访问：{{link1：Bootstrap 4 alpha中Affix无法正常工作}}

- Bass Jobsen