0

jquery scrollTo(awesome...) を使用した水平視差サイトで、現在のページ幅を知る決定を下す際に、windowsize 値と scrollLeft 値を使用しようとしています。それはすべて働いています。

左から右にスクロールしているときに特定のウィンドウ幅がヒットまたは移動すると、最終的にナビゲーション項目に値を設定して、次のマークへの道しるべを提供したいと考えています。以下に示すようにアラート/テストコードを使用して、ポイントがヒットしていることを確認します。そして、それらは - スクロールが本当に遅い場合。

これらの数字をきれいかつ確実に把握するためのアイデアはありますか? jqueryが取得できないほど高速に起動しているようです。それとも、これを正しく表示していませんか?

function parallaxScroll(){

    var scrolledX = $(window).scrollLeft();
    var windowsize = $(window).width();

    var win0 = 0;
    var win1 = windowsize;
    var win2 = windowsize * 2;
    var win3 = windowsize * 3;

    if (scrolledX == win1) {
        $("#test").text("mark1");
    }
    if (scrolledX == win2) {
        $("#test").text("mark2");
    }
    if (scrolledX == win3) {
        $("#test").text("mark3");
    }

}
4

1 に答える 1

1

正確なサイズをつかむのは本当に難しいです。サイズとそれより大きいものを探します。たとえば、100 の場合win1は 100 ～ 199 で起動し、win2200 ～ 299 の場合は起動します。

また、最大から最小のウィンドウ サイズもチェックすることに注意してください (最小から最大にすることが>でき<ますwin3。

また、if ... else if ... else誤って複数回起動しないように、checks ステートメントを作成します (win3 は win2 よりも大きいため、win3 でも win2 が起動します)。

function parallaxScroll(){

  var scrolledX = $(window).scrollLeft();
  var windowsize = $(window).width();

  var win0 = 0;
  var win1 = windowsize;
  var win2 = windowsize * 2;
  var win3 = windowsize * 2;

  if (scrolledX >= win3) {
    $("#test").text("mark3");
  }
  else if (scrolledX >= win2) {
    $("#test").text("mark2");
  }
  else {
    $("#test").text("mark1");
  }

}
于 2013-05-18T23:58:45.563 に答える