Blus
var filter_button = document.getElementById('filter-button');
let filter_button_position = filter_button.getBoundingClientRect().bottom;
var filter_button_fixed = document.getElementById('filter-button-fixed');
var close_filter_button = document.getElementById('close-filter');
var filter_column = document.getElementsByClassName('ajax-filter-column')[0];
var filter_column_close = document.getElementsByClassName('ajax-filter-close')[0];
var filter_column_overlay = document.getElementById('filter-column-overlay');
filter_button.addEventListener('click',()=>{
filter_column.classList.add('show-filter');
filter_column_close.classList.add('show-filter');
filter_column_overlay.classList.add('show-filter');
document.body.style.overflow = "hidden";
});
filter_button_fixed.addEventListener('click',()=>{
filter_column.classList.add('show-filter');
filter_column_close.classList.add('show-filter');
filter_column_overlay.classList.add('show-filter');
document.body.style.overflow = "hidden";
});
close_filter_button.addEventListener('click',()=>{
filter_column.classList.remove('show-filter');
filter_column_close.classList.remove('show-filter');
filter_column_overlay.classList.remove('show-filter');
document.body.style.overflow = "auto";
});
filter_column_overlay.addEventListener('click',()=>{
filter_column.classList.remove('show-filter');
filter_column_close.classList.remove('show-filter');
filter_column_overlay.classList.remove('show-filter');
document.body.style.overflow = "auto";
});
document.addEventListener('scroll', ()=>{
showFixedFilter();
});
showFixedFilter();
function showFixedFilter(){
if(window.scrollY > filter_button_position) {
filter_button_fixed.classList.add('show-button');
} else {
filter_button_fixed.classList.remove('show-button');
}
}
