如何在完整日历中制作固定标题。
请看 fiddle ,周日、周一、周二、周三、周四、周五、周六是我的标题。 我希望周日到周六的标题必须得到修复。如果我垂直滚动,标题不应隐藏。
$(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');
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>');
//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>
最佳答案
我认为您正在寻找这个 -
您需要在标题上添加一个类
.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");
}
});
希望对你有帮助。
关于javascript - 如何在完整日历中制作固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38478808/