0

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

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

我正在使用 jQuery 来查找窗口的高度li.flex-active-slide和高度，这很好用。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;
        }
    });
});

（旁注：点击导航时 URL 正在更新。问题和相应答案的信用在这里。）

为了找到高度：

$(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');
    }
});

我想知道是否有办法将这两个代码结合起来？

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

4

1 回答 1

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');
        }
}
});

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

于 2013-10-18T15:41:42.023 回答