Как сделать фиксированный заголовок полностью Календарь

Question

Как я могу создать фиксированный заголовок в полноэкранном режиме.

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

jsfiddle

$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    var events_array = [ 
 
     { 
 
     title: 'Test1', 
 
     start: new Date(2012, 8, 20), 
 
     tip: 'Personal tip 1'}, 
 
    { 
 
     title: 'Test2', 
 
     start: new Date(2012, 8, 21), 
 
     tip: 'Personal tip 2'} 
 
    ]; 
 

 
    $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
     }, 
 
     selectable: true, 
 
     events: events_array, 
 
     eventRender: function(event, element) { 
 
      element.attr('title', event.tip); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).on('hover', '.fc-day-number', function(){ 
 
    $('#cal-info').addClass('hide'); 
 
\t var data = $(this).html(); 
 
    var offset = $(this).offset(); 
 
    $('#cal-info').css('left', offset.left); 
 
    $('#cal-info').css('top', (offset.top - 40)); 
 
    $('#cal-info').html('information about: '+$(this).html()+'<br>Link to google: <a href="http://google.com" target="_blank">Google</a>'); 
 
\t //p.html("left: " + offset.left + ", top: " + offset.top); 
 
    $('#cal-info').removeClass('hide'); 
 
});

.tag{ 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:3px; 
 
    max-height:60px; 
 
    overflow: visible; 
 
    position: fixed; 
 
    z-index:999; 
 
} 
 
.tag:after { 
 
    content: ""; 
 
    border-top: 16px solid red; 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    position: absolute; 
 
    bottom: -16px; 
 
    left: calc(50% - 8px); 
 
}

<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script> 
 
<div style="border:solid 2px red;"> 
 
     <div id='calendar'></div> 
 
</div> 
 
<div class="tag hide" id="cal-info"> 
 

 
</div>

Answer 1

Добавьте это к вашему стилю.

.calendar { 
    position:relative; 
} 

.fc-header { 
    position:fixed; 
} 

.fc-content { 
    padding-top:50px; 
} 

Answer 2

посмотреть здесь: jsfiddle

код:

var headerHeight = $(".fc-header").height() 


$(window).scroll(function(){ 
    if($(window).scrollTop() > headerHeight){ 
     $("thead").addClass("fixed") 

    }else{ 
     $("thead").removeClass("fixed") 
    } 
});  

CSS:

thead.fixed { position:fixed;width:100%;top:0;display:table;} 

добавил JQ, где вы рассчитать высоту .fc-header и так, только после прокрутки этой высоты, thead будет исправлен.

для thead стать fixed я добавил класс fixed в JQ, а затем в CSS стиле, что класс

дайте мне знать, если это помогает

EDIT: интересный downvote. hmm

Answer 3

привет здесь обновленная скрипка. проверить обновленный CSS в конце.

http://jsfiddle.net/v98sb2a0/3/

.fc-border-separate thead tr 
{ 
position: fixed; 
margin-bottom: 20px; 
width: 100%; 
} 
.fc-border-separate thead tr th 
{ 
    width:80px; 
} 
.fc-border-separate th.fc-last, .fc-border-separate td.fc-last 
{ 
    border-right-width: 0px; 
} 

Answer 4

Я думаю, что вы ищете это -

jsfiddle

Вам нужно добавить класс на ваш заголовок

.fc-border-separate thead.sticky{ 
    width: 100%; 
    position: fixed; 
    top:0px; 
    left:0px; 
    display:table; 
    background: #fff; 
} 

и добавлять и удалять на прокрутка окна с помощью jquery

$(window).scroll(function() { 
    if ($(this).scrollTop() > 1){ 
     $('.fc-border-separate thead').addClass("sticky"); 
    } 
    else{ 
     $('.fc-border-separate thead').removeClass("sticky"); 
    } 
}); 

Надеюсь, это поможет вам.

Answer 5

.fc-widget-header { 
    position: sticky; 
    z-index: 100; 
    top: 0; 
    background-color: white; 
}