Question

我有一个Flexslider，包含项目的所有内容。在这种情况下，每个“页面”或幻灯片都有不同的内容，例如更新，项目，关于和联系。

页面长度不同，有些需要滚动条，有些则不需要。在不需要滚动的页面上，内容下方有一个大的空白区域。这个空间被内容占用在其他页面上。

我正在使用jQuery来查找li.flex-active-slide和窗口的高度，这很好用。当点击导航时{I} li.flex-active-slide类发生变化时，我无法弄清楚如何告诉jQuery。

这是我的Flexslider代码：

$(document).ready(function() {
    //set some variables for calculating the hash
    var index = 0, hash = window.location.hash;
    //via malsup (Cycle plugin), calculates the hash value
    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1;
    }
    $(window).trigger('resize');
    $('#mainflexslider').flexslider({
        animation: "fade",
        slideDirection: "horizontal",
        keyboardNav: false,
        slideshow: false,
        animationSpeed: 500,
        controlsContainer: ".flex-container",
        manualControls: ".flex-control-nav li",
        startAt: index,
        after:function(slider){
            window.location.hash = slider.currentSlide+1;
        }
    });
});

（附注：点击导航时正在更新网址。问题和相应答案的信用为here。）

找到身高：

$(window).load(function() {
    var slideHeight = $("li.flex-active-slide").height();
    var windowHeight = $(window).height();

    if (slideHeight > windowHeight) {
        $('html, body').css('overflowY', 'auto');
    }
    else {
        $('html, body').css('overflowY', 'hidden');
    }
});

我想知道是否有办法合并这两个代码？

如果没有，如何在Flexslider附加li.flex-active-slide类时告诉jQuery？

Answer 1

你可以试试这个

$(window).load(function() {
var index = 0, hash = window.location.hash;
//via malsup (Cycle plugin), calculates the hash value
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1;
}
$(window).trigger('resize');
$('.flexslider').flexslider({
    animation: "fade",
    slideDirection: "horizontal",
    keyboardNav: false,
    slideshow: false,
    animationSpeed: 500,
    controlsContainer: ".flex-container",
    manualControls: ".flex-control-nav li",
    startAt: index,
    after:function(slider){
        window.location.hash = slider.currentSlide+1;
        sliderheight();
    },
    start:function(slider){
        sliderheight();
    }
});
function sliderheight(){
    var slideHeight = $("li.flex-active-slide").height();
        var windowHeight = $(window).height();
        console.log(slideHeight+" > "+windowHeight);
        if (slideHeight > windowHeight) {
            $('html, body').css('overflow-y', 'auto');
        }
        else {
            $('html, body').css('overflow-y', 'hidden');
        }
}
});

使用overflow-y的所有代码创建一个函数，并从回调中调用它，它可以在之前，之后或开始时打开

Flexslider主体滚动仅适用于当前幻灯片（V2）

1 个答案: