完全なカレンダーで固定ヘッダーを作成する方法

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;} 

だけで、あなたが.fc-headerなどの高さを計算JQを追加しましたあなたがその高さを過ぎてスクロールした後、 theadが修正されます。 theadfixedになるために

私はJQでクラスfixedを添加し、次いで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; 
}