Плавающий видны DIV внутри горизонтальной прокруткой сНу CSS

Question

Вопрос заключается в следующем:

У меня есть календарь, в котором пользователь может создать встречу (с помощью планировщика DHTMLX Timeline View), основной проблемой является планировщик не поддерживает прокручиваемый вид, только соответствует графику в представлении.

I Решите предыдущую проблему, создав div с шириной FIXED (таким образом, у меня будет более длинный горизонтальный планировщик) и оберните его внутри div, что позволит прокручивать по горизонтали его содержимое.

Однако я не имею четкое представление о том, как решить следующую проблему вызвало:

Когда календарь загружен, вы можете увидеть, ДИВ принадлежит к горизонтальной Роу

И когда пользователь прокручивает по горизонтали (например, к 7:00 PM) Вы не можете видеть, в каком div с цветом вам нужно создать встречу!

Так что мне нужно что-то вроде этого, где ДИВ все еще виден, хотя пользователь прокручивает по горизонтали:

Я уже пытался что-то вроде следующего: Может быть проблема с родительским контейнером, потому что он скрывает div, если возможно работает следующее?

.visible-division{ 
    position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/ 
    float:left; 
    z-index:9000;/*a higher z-index in case something cover the div*/ 
} 

без удачи ..

Мой CSS

#calendar-container{ 
    width: 2000px; 
} 
#calendario { 
    height: 900px; 
    width: 100%; 
    border: 1px solid #cecece; 
} 
.scrolling_container { 
    height: 100%; 
    overflow: auto; 
} 

И мой Markup

<div class="scrolling_container"> 
<div id="calendar-container"> 
     <div class="dhx_cal_container panel" id="calendario"> 
      <div class="dhx_cal_navline"> 
       <div class="dhx_cal_prev_button">&nbsp;</div> 
       <div class="dhx_cal_next_button">&nbsp;</div> 
       <div class="dhx_cal_today_button"></div> 
       <div class="dhx_cal_date"></div> 

       <div class="dhx_cal_tab" name="day_tab"></div> 
       <div class="dhx_cal_tab" name="week_tab"></div> 
       <div class="dhx_cal_tab" name="month_tab"></div> 
       <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div> 
      </div> 
      <div class="dhx_cal_header"></div> 
      <div class="dhx_cal_data"></div> 
     </div> 
    <div class="well text-right"> 
     <div> 
      <a href="javascript:void(0)"> a link</a> 
     </div> 
    </div> 
</div> 

Она может быть решена с помощью CSS? В противном случае, следует ли применять к нему классы в случае события прокрутки?

Любая помощь приветствуется, спасибо!

Answer 1

This может помочь вам сделать трюк.

.visible-division{ 
     position:fixed; 
     width: /* specifiy */ 
     height: /* specify */ 
     top: /* specify */ 
     left: /* specify */ 
    } 
    .scrolling_container { 
     height: 100%; 
     overflow: auto; 
    } 

Хотя не поддерживается большинством браузера, вы можете попробовать sticky значение позиции position: sticky.

Answer 2

Надеюсь, что это будет полезно, примените этот класс только к плавающему div.

.floating{ 
position:fixed; 
top:20px; 
right:0px; 
width:80%; /* as required */ 
}