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

【问题标题】：Toggle Sidebar with sticky header and footer使用粘性页眉和页脚切换侧边栏
【发布时间】：2015-08-22 05:51:13
【问题描述】：

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

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

我有一个使用 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>

除了引导程序和简单的侧边栏（我删除了侧边栏上的 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;
}

*如果在窗口向上滚动的任何时候都能看到标题，我也希望它，但我想一旦解决了这个问题，我就可以自己得到它。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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。

【讨论】：