0

私が持っているものの例をここに作りました: http://jsfiddle.net/jewb/tM5h7/4/

私のスクリプトは次のようになります:

var minHeight = $(window).scrollTop();
var maxHeight = $(window).height();
var middleHeight = (maxHeight + minHeight) / 2;

$(window).scroll(function () {
    var positionTopDiapo = $('#diaporama').offset().top;
    var hauteurDivDiapo = $('#diaporama').height()/2;
    var positionTop = $('#frame').offset().top;
    var hauteurDiv = $('#frame').height()/2;
    var positionY = positionTop + hauteurDiv - $(window).scrollTop();
    var positionYDiapo = positionTopDiapo + hauteurDiv - $(window).scrollTop();
    var bottomDiapo = (positionTopDiapo - $(window).scrollTop()+ $('#diaporama').height());
    var bottomFrame = (positionTop - $(window).scrollTop()+$('#frame').height());


    var window_width = $(window).width() - $('#frame').width();
    var document_height = $('#diaporama').height() - $('window').height();
    var scroll_position = $(window).scrollTop();
    var object_position_left = window_width * (scroll_position / document_height);
    $('#frame').css({'left': object_position_left });

    if(positionYDiapo<=middleHeight){
        $('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'});





                if(bottomDiapo<=bottomFrame){
                    $('#frame').css({ 'position': 'absolute' });
                    $('#frame').css({ 'bottom': '0px' });
                    $('#frame').css({ 'top': 'auto' });
                }

     }  else{
        $('#frame').css({position:'absolute', top:'0px', bottom:'auto'});
        $('#frame').css({ 'left': '0px' });
    }

これが問題です。最初#frameは位置があり、ウィンドウの真ん中に来absolute, top:0px;たら、位置を固定する必要があります。が修正されたら、左から右にスクロールする必要があります。ページの中央に到達すると同時に、最後に到達する必要があります。それが最後に達すると、絶対的な位置を持ち、#diaporama#frame#frame#frame#diaporama#framebottom:0px;

次に、ドキュメントの最後までスクロールし続けます。上にスクロールすると、逆に同じことが行われます。

4

1 に答える 1

1

これが私がこれまでに行ったことです：jsfiddle

    var scroll_position = $(window).scrollTop(),
        d = $('#diaporama').get(0).scrollHeight,
        c = $('#diaporama').get(0).scrollWidth,

    scrollPercent = (scroll_position / (d+c));
    var position = (scrollPercent * - $('#frame').width())+positionTopDiapo;
    var positionGauche = $('#frame').offset().left;

    var tarif = $('#tarif').offset().top - $(window).scrollTop();

左の位置を与えると多少の不具合がありますが、全体的にはかなり素晴らしいです. 誰かがコードを改善できる場合は、教えてください。同じ問題を抱えている他の人を助けるために、このコードを入れました。私と同じ問題を抱えている他の人にとっては、それがきっかけになるかもしれません。

于 2013-09-27T19:36:04.747 に答える