3

chanel.comに似たサイトを作りたいのですが、下にスクロールすると、新しいdivがページの一番上に移動します。違いは、私がデザインしているサイトでは、クリックに対しても同じ効果があるはずだということです。私のサイトには、クリック時に同じdivを上下に移動し、サイトの2番目のセクションを展開および折りたたみする2つのボタンがあります。

Stack Overflowに関する他の質問を見て、ここまで到達しましたが、今は行き詰まっています。私の問題はこれです：初めてクリックでdivを上下に動かすと、正常に動作します。二度目は、それはすべて奇妙でびくびくしています。上下にスクロールせずにスナップバックします。

誰もがコードを簡単に変更できるように、ここのjsFiddleでサイトの簡略化されたバージョンを作成しました。

誰かがこの問題で私を助けることができれば、それは大いにありがたいです！これが私のコードです：

var ovf, slider;

$(function(){
    ovf = this.getElementById("signUp");
    slider = this.getElementById("intro");
    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});

});

function winResize(){   
    ovf.style.top = slider.offse## Heading ##tHeight + "px";
}

function winScroll(){
var op = 1 - ($(document).scrollTop() / slider.offsetHeight);
}

$(document).ready(function(){
    $("#scrollDown a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '0',
  }, 500, function() {
    // Animation complete.
  });

    });
});

$(document).ready(function(){
    $("#scrollUp a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '99%',
  }, 500, function() {
    // Animation complete.
  });

    });
});
4

1 に答える 1

1

これが動作するjsFiddleです。

イベント内に変更0する必要があります。0%scrollDown

function winScroll(){
var op = 1 - ($(document).scrollTop() / slider.offsetHeight);
}

$(document).ready(function(){
    $("#scrollDown a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '0%',
  }, 500, function() {
    // Animation complete.
  });

    });
});

$(document).ready(function(){
    $("#scrollUp a").live('click',function(e){
       console.log('test');
       $('#signUp').animate({
    top: '100%',
  }, 500, function() {
    // Animation complete.
  });

    });
});
于 2013-03-25T23:37:13.977 に答える