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

これら2つのコードを組み合わせる方法があるかどうか疑問に思っていますか?

そうでない場合、Flexslider がli.flex-active-slideクラスを追加するタイミングを jQuery に伝えるにはどうすればよいですか?

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 に答える