javascript - 修复在滚动页面中显示隐藏面板

Question

我使用这样的 Bootstrap 设计显示/隐藏面板:

HTML:

    $(function() {
      $("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
        $("#mySideBar").toggleClass("sidebar-nav-togled");
        $(".backdrop").toggle();
      });

      $(".list-group-item").click(function() {
        $(".list-group-item").removeClass("active");
        $(this).addClass("active");
      });
    });

.content {
  height: 1000px;
}
.sidebar-nav-togled {
  margin-left: 0px;
}
.sidebar-nav {
  margin-left: -250px;
  width: 250px;
  z-index: 10001;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  height: 100vh;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #fafafa;
  border-right: 1px solid #ccc;
}
.sidebar-nav-togled {
  margin-left: 0px;
}
.sideBarCloseIcon {
  float: right;
  cursor: pointer;
}
.backdrop {
  height: 100vh;
  width: 100%;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background-color: #000;
  opacity: 0.2;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.sidebar-nav .list-group-item {
  background-color: transparent;
  border: 0px;
  cursor: pointer;
}
.sidebar-nav .list-group {
  margin-left: -15px;
  margin-right: -15px;
}
.sidebar-nav .list-group hr {
  margin-top: 0px;
  margin-bottom: 0px;
}
.list-group-item-icon {
  padding-right: 5px;
}
#hamburgerMenu {
  cursor: pointer;
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: #337ab7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation" style="margin-bottom: -20px">
  <div class="container-fluid">
    <div class="navbar-header">
      <a id="hamburgerMenu" class="navbar-brand"><span
    					class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
      <a class="navbar-brand">Slide Panel</a>
    </div>
  </div>
  <!--/.container-fluid -->
</div>
<div class="backdrop"></div>
<div id="mySideBar" class="sidebar-nav container-fluid" aria-label="...">
  <div class="row">
    <div class="col-xs-12" style="padding: 5px 15px 1px 15px">
      <h4 style="padding-left: 0px; font-size: 19px; color: #666">
    					WorkPanel <span
    						class="sideBarCloseIcon glyphicon glyphicon-remove"
    						aria-hidden="true"></span>
    				</h4>
    </div>
  </div>
  <hr style="margin: 5px -15px" />
  <ul class="list-group">
    <li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
    <li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-user" aria-hidden="true"></span>My Profile
    </li>
    <li class="list-group-item"><span class="badge">2</span>
      <i class="fa fa-newspaper-o list-group-item-icon"></i>News</li>
    <hr />
    <li class="list-group-item">
      <i class="fa fa-question list-group-item-icon"></i>
      <span class="badge">2</span> Forum</li>
    <li class="list-group-item">
      <i class="fa fa-users list-group-item-icon"></i>
      <span class="badge">2</span> Teams</li>
  </ul>
  <hr style="margin: 5px -15px" />
  <form class="form-inline">
    <div class="form-group" style="width: 181px">
      <label for="exampleInputName2">Search Here</label>
      <input type="text" class="form-control" id="exampleInputName2" style="width: 100%" placeholder="Enter Text Here">
    </div>
    <button style="margin-top: 24px; padding: 9px;" type="submit" class="btn btn-default">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
  </form>
  <hr style="margin: 5px -15px" />

  <div>
    <strong>Need Help ? Contact Us</strong>
    <ul class="list-group">
      <li class="list-group-item"><i class="fa fa-envelope list-group-item-icon"></i>Mail</li>
      <li class="list-group-item"><i class="fa fa-phone list-group-item-icon"></i>Phone</li>
    </ul>
  </div>
</div>
<div class="content">
  ######
</div>

Now In Action 为我工作但是当我滚动页面时我的面板滚动到顶部。我需要将我的面板固定在滚动顶部。如何解决这个问题？

$(function() {
      $("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
        $("#mySideBar").toggleClass("sidebar-nav-togled");
        $(".backdrop").toggle();
      });

      $(".list-group-item").click(function() {
        $(".list-group-item").removeClass("active");
        $(this).addClass("active");
      });
    });

演示:https://jsfiddle.net/9m7m756a/

Answer 1

您可以像这样使用固定定位:

#mySideBar {
  position: fixed;
}

或查看此 Fiddle .

希望这对您有所帮助!