Сделать боковую панель липкой с относительной позицией

#html #jquery #css

#HTML #jquery #css

Вопрос:

Я пытаюсь сделать панель управления адаптивной и перемещаться вместе со страницей, однако я также хочу, чтобы другие данные на странице были относительно нее. Прилагается код, а также кодовое имя. Любая помощь будет высоко оценена. Спасибо

 .side-menu #dropdown {
  border: 0;
  margin-bottom: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.side-menu #dropdown .caret {
  float: right;
  margin: 9px 5px 0;
}

.side-menu #dropdown .indicator {
  float: right;
}

.side-menu #dropdown>a {
  border-bottom: 1px solid #e7e7e7;
}

.side-menu #dropdown .panel-body {
  padding: 0;
  background-color: #f3f3f3;
}

.side-menu #dropdown .panel-body .navbar-nav {
  width: 100%;
}

.side-menu #dropdown .panel-body .panel-body li:last-child {
  border-bottom: 1px solid #e7e7e7;
}

.side-menu {
  position: relative;
  top: 0;
  left: 0;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 1px;
}


/* When you mouse over the navigation links, change their color */

.side-menu a:hover {
  color: #f1f1f1;
}

.sidebar>.row {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
} 
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
</style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js" defer></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">

<!-- THIS LINE -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="sticky.min.js"></script>

<div class="container">
  <div class="menu-container">
    <div class="row">
      <div class="col-md-2 sidebar">
        <div class="row">
          <!-- uncomment code for absolute positioning tweek see top comment in css -->
          <!-- Menu -->
          <div class="side-menu sticky-sidebar">
            <nav class="navbar navbar-default" id="this_navigation" role="navigation">
              <!-- Main Menu -->
              <div class="side-menu-container">
                <ul class="nav sidebar-side">
                  <li class="active"><a href="/index/<%= role %>/<%= _id %>" style="color: gray;"><span class="glyphicon glyphicon-dashboard"></span> Home</a></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div class="col-md-7 content">
        <div class="container">
          <div class="row">
            <!--<div class="panel panel-primary" hidden>
              <div class="panel-heading">
                <h3 class="panel-title" align="center">Car Tracking Device Information</h3>
              </div>
            </div>-->
            <div class="container" align="center">
              <div class="row">
                <h3>Filter Tables</h3>
                <p>Type something in the input field to search the devices for country, manufacturer, models or versions:</p>
                <input class="form-control" id="myInput" type="text" placeholder="Search.." style="width: 50%; height:36px;" />
              </div>
            </div>
            <br/>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 

CodePen: https://codepen.io/kashan12718/pen/LYRYdyM

Комментарии:

1. Под «приборной панелью» вы подразумеваете левую кнопку?

2. да, левая боковая панель добавляет больше элементов. Спасибо