Question

我希望能够有一个侧栏，可以按下按钮切换进出。但是，我希望这个侧边栏与页面的主要内容一起使用，并且适合粘性页眉和粘性页脚。

我的问题是当我滚动侧边栏时保持固定。我希望侧边栏和页面内容能够一起滚动，标题消失。然后页面内容将滚动，而标题保持原样。然后，一旦到达页面底部，页脚就会进入，这会缩小侧边栏的底部。如果侧栏中有溢出，则侧栏应该可滚动。

我在这里使用bootstrap和simple-side bar模板有一个近乎工作的例子：https://jsfiddle.net/co7080j6/。唯一的问题是侧栏不能用粘性页眉和页脚调整它的位置。

我正在使用的HTML是：

<body>
<!-- Navbar --> 
<nav class="navbar navbar-inverse" style="margin: 0;">
  <div class="container">
    <a class="navbar-brand" href="#">Project name</a>
  </div>
</nav>
<!-- /#navbar -->
<div class="container-full" >
  <div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          <a href="#"> Start Bootstrap</a>
        </li>
        <li>
          <a href="#">Events</a>
        </li>
      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper" style="height: 900px">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <a href="#menu-toggle" class="btn btn-default" 
                id="menu-toggle">
              Toggle Menu
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- /#page-content-wrapper -->
  </div>
  <!-- /#wrapper -->
</div>
<!-- container-full -->
<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>
</body>

除了bootstrap和简单的侧边栏（我在侧边栏上删除了z-index）我也是我也在使用：

/*MY CSS*/
.container-full {
  margin: 0 auto;
  width: 100%;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #333;
}

*我也喜欢它，如果在窗口向上滚动时标题进入视图，但我想我可以在解决后自行获取。

Answer 1

这更像是一个CSS问题。如果对CSS文件进行以下更改，则可以获得所需的功能。

#sidebar-wrapper {
    position: absolute;
    height: 90%;
}

.sidebar-nav {
    position: fixed;
    top: 55px;
    left: 30px;
}

还需要包含一些额外的JQuery来解决当位置设置为固定时侧边栏导航文本无法隐藏的事实。

$(document).ready(function() {
    $('#menu-toggle').click(function() {
       $('.sidebar-nav').fadeToggle(300); 
    });
});

Here's a JSFiddle

我并非100％确定您希望侧边栏文字滚动或保持原位。如果你希望它保持不变，只需删除我所做的.sidebar-nav CSS更改。并here's JSFiddle。

使用粘性页眉和页脚切换侧栏

1 个答案: