bootstrap - сохранить div фиксированным на горизонтальной прокрутке прокрутки

#javascript #jquery #html #css #twitter-bootstrap

#javascript #jquery #HTML #css #twitter-bootstrap

Вопрос:

У меня есть некоторые элементы управления в нижней части div. Я бы хотел, чтобы эти элементы управления оставались фиксированными при прокрутке пользователя.

Я попытался: 1) Исправить div. Проблема в том, что id уничтожает мои атрибуты начальной загрузки, а также потому, что высота генерируется динамически.

    <div id="timelineContainer">
  <p class="mes">{{mes1}}</p>
  <div id='chart_div' class="chart"></div>

  <div class="row fixedcontrols">

    <div class="fixed col-md-1 col-lg-1 col-xs-1 form-group-lg">
      <button type="button" id="next1" class="btn btn-primary btn-block transback " ng-click="timeline.getPreviousData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load previous 100 records...">
        <span id="nextdata1" class="glyphicon glyphicon-arrow-left"></span></button>
    </div>

    <div class="col-md-3 col-lg-3 col-xs-3 ">
      <button type="button" class="btn btn-warning btn-block" class="tt" id="btn_ZoomIn" name="btn_ZoomIn" ng-click="timeline.zoomIn()"><span id="zoomin" class="glyphicon glyphicon-zoom-in"></span>
      </button>
    </div>

  <div class="col-md-3 col-lg-3 col-xs-3  form-group-lg">
  <button type="button" class="btn btn-primary btn-block" id="btn_ZoomOut" name ="btn_ZoomOut" ng-click="timeline.zoomOut()"> <span id="zoomout" class="glyphicon glyphicon-zoom-out"></span></button>
</div>

  <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 form-group-md ff">
    <button type="button" id="advanced1" ng-click="timeline.searchclick()" class="btn btn-default btn-block">Show Search</button>
  </div>
  <div class="col-md-1 col-lg-1 col-xs-1 form-group-lg pull-right">
    <button type="button" id="next" class="btn btn-primary btn-block " ng-click="timeline.getNextData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load next 100 records..."> <span id="nextdata" class="glyphicon glyphicon-arrow-right"></span>
    </button>
  </div>

  </div>
</div>



 #timelineContainer {

 overflow-x: scroll;
 overflow-y: scroll;
 white-space: nowrap;  border: 13px solid #bed5cd;
 width: 100%;
 margin: 0 auto;
 position: relative;
 background-color:  #5bc0de;
  }

Спасибо.

Обновление: элементы управления перемещаются при прокрутке пользователем, как показано ниже. Я хочу, чтобы они были исправлены.

обновление: указанное изображение

1. можете ли вы объяснить больше?? что вы на самом деле хотите получить

2. Я хочу, чтобы элементы управления оставались фиксированными, когда пользователь прокручивает влево или вправо. В настоящее время, когда я прокручиваю, элементы управления прокручиваются, и пользователь не может видеть кнопки управления. Пожалуйста, посмотрите мое обновление.

3. у вас есть еще css ?? или js?? что вы забыли добавить сюда??

4. Его много страниц, я вставил только то, что, по моему мнению, было бы необходимо для выполнения указанной задачи. Скажите мне, что вам нужно, и я опубликую это. Спасибо.

5. Хорошо, нет проблем, вам просто нужен внутренний div, который содержит кнопку управления .. прокручивайте, как фиксированную панель навигации..

Ответ №1:

Из вашего вопроса я могу понять, что вы хотите, чтобы ваш div в нижней части страницы был зафиксирован в нужном положении,

я надеюсь, что небольшое изменение в css решит вашу проблему

 position: fixed !important;

если это не то, что вы имели в виду, не могли бы вы объяснить подробнее!!

Ответ №2:

установите абсолютное положение элементов управления и убедитесь, что их предком является div с идентификатором timelineContainer. absolute расположит элементы относительно своего предка. независимо от того, куда вы перемещаетесь, они будут привязаны к div.