Недельный календарь с фильтром и и смещением зависящим от скрола
Как сделать календарь со смещением в зависимости от скрола и подсветкой активного дня и фильтром: как пример - https://members.onepeloton.com/schedule/cycling Пытался сделать так? но работает с глюками:
$(window).scroll(function(){
var $days = $('h2.day');
let $week = $('.week');
$week.each(function(i,el){
var top = $(el).offset().top;
var scroll = $(window).scrollTop();
var week_number = $(el).attr('id');
if( scroll > top){
change_top_menu(week_number);
}
})
$sections.each(function(i,el){
var top = $(el).offset().top;
var bottom = top +$(el).height();
var scroll = $(window).scrollTop();
var id = $(el).attr('id');
$('a .menu_top').removeClass('active');
if( scroll > top-190 ){
$('a .menu_top').addClass('active');
}
});
});
function create_week(week_number=null){
for (var i = 0; i < 7; i++) {
var day=week*7+i;
$('#main_nav').append('<li><a href="#'+ moment(days[day].id,"MM-DD").format("MM-DD")+'">' +
'<div>' +
'<p>'+ moment(days[day].id,"MM-DD").format("ddd") +'</p>' +
'</div></a></li>');
}
}