对于侧边菜单,重新计算高度:自适应,平板电脑和桌面。在平板电脑左侧边栏有滚动。这适用于模拟器,但这不适用于真正的平板电脑设备。在这种情况下我需要做什么才能正确显示滚动?谢谢!
https://codepen.io/malinosky/pen/JOVdOG
var calcHeightFilter = function calcHeightFilter() {
var bodyHeight = $(document).outerHeight(true);
var asideHeight = $('.section--aside').height();
if (($(document).width()) < 768) {
if ($('.section--aside').hasClass('open-aside')) {
$('.js-anchor-top').css("display", "none");
if (bodyHeight > asideHeight) {
$('body').css("overflow", "hidden");
$('body').height(asideHeight + 169);
}
}
}
if (($(document).width()) >= 768 && ($(document).width()) <= 1023 ) {
var tabletFilterHeight = $('.wrap-main').height();
$(".section--aside").height(tabletFilterHeight);
$(".section--aside").css("overflow-y", "auto");
$(".section--aside").css("height", function(){
return $('.wrap-main').height() + 70;
});
var newwTabletFilterHeight = $('.section--content').height() + 112 + $('.footer').height(); // 112 - это шапка
var asideNewwHeightH = $(".section--aside").height(newwTabletFilterHeight - 70);
$('body').height(newwTabletFilterHeight);
$(window).scroll(function() {
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
calcHeightFilter();
$('.button_more').css('box-shadow', '0px 0px 13px 0px rgba(0, 0, 0, 0.2)');
} else {
$('.button_more').css('box-shadow', 'none');
}
});
}
if (($(document).width()) > 1023) {
$('body').css("overflow-y", "visible");
$('section--aside').css("overflow-y", "visible");
}
$(window).on('resize', function(){
if (($(document).width()) < 768) {
if ($('.section--aside').hasClass('open-aside')) {
$('.js-anchor-top').css("display", "none");
$('body').css("overflow", "hidden");
$('.section--aside').css("overflow", "hidden");
$('.section--aside').css("height", "auto");
$("body").css("height", function(){
return $('.section--aside').height() + 169;
});
$('.section--aside__close').css("display", "block");
$('.section-empty').remove();
}
}
if (($(document).width()) >= 768 && ($(document).width()) <= 1023 ) {
var newTabletFilterHeight = $('.section--content').height() + 112 + $('.footer').height();
var asideNewHeightH = $(".section--aside").height(newTabletFilterHeight);
$('body').height(newTabletFilterHeight);
$(".section--aside").css("overflow-y", "auto");
if ($('.section--aside').hasClass('open-aside')) {
$('.section--aside__close').css("display", "block");
$(".wrap-main").append('<div class="section-empty">');
$('body').height(newTabletFilterHeight + $('.section-empty').height());
}
}
if (($(document).width()) > 1023) {
$('body').css("height", "inherit");
$('.section-empty').remove();
$(".footer").css("margin-bottom", "0");
$('.section--aside__close').css("display", "none");
$('body').css("overflow", "visible");
$('.section--aside').css("overflow", "visible");
$('.section--aside').css("height", "auto");
}
});
}
$(document).on('click', '.js-filter_show', function(){
$(".section--aside").addClass("open-aside");
$(".section--catalog").addClass("overlay-section");
$('.section--aside__close').css("display", "block");
if (($(document).width()) >= 768 && ($(document).width()) <= 1023 ) {
$(".wrap-main").append('<div class="section-empty">');
}
calcHeightFilter();
});
$(document).on('click', '.section--aside__close', function(){
$(".section--aside").removeClass("open-aside");
$('.section--aside__close').css("display", "none");
$(".section--catalog").removeClass("overlay-section");
$('.section-empty').remove();
$('body').css("overflow", "visible");
$('body').css("height", "100%");
});