滚动操作不正确

时间:2017-12-05 23:15:27

标签: javascript jquery html css

对于侧边菜单,重新计算高度:自适应,平板电脑和桌面。在平板电脑左侧边栏有滚动。这适用于模拟器,但这不适用于真正的平板电脑设备。在这种情况下我需要做什么才能正确显示滚动?谢谢!

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%");
});

0 个答案:

没有答案