0

画面が特定の幅の場合に DIV を修正するスクリプトを作成しようとしています。これは私がこれまでに持っているものですが、ロジックが正しくなく、書き方がわかりません。

var controller = new ScrollMagic();

var w = $(window).width();
if(w >= 500) {
    var sidebar = new ScrollScene()
        .triggerHook("0")
        .setPin("#sidebar-pin")
        .addTo(controller);   
}
$(window).on('resize',function(){
    if(w < 500) {
            controller.removePin("#sidebar-pin",true);
    } else {
    var sidebar = new ScrollScene()
        .triggerHook("0")
        .setPin("#sidebar-pin")
        .addTo(controller); 
  }
});

http://jsfiddle.net/gtowle/jxoewzoo/

私が目指しているロジックは次のとおりです。

  1. ページの読み込み時に、ウィンドウの幅が 500 より大きい場合は、A を実行します。そうでない場合は、何もしません。
  2. ウィンドウのサイズ変更で、ウィンドウ幅が 500 未満になった場合は B を実行し、640 を超えた場合は A を実行します。

私の問題は、ウィンドウのサイズが変更されたときに＃2をトリガーする方法がわからないことだと思います。

4

2 に答える 2

1

最初の問題は、(ページの読み込み時に) ウィンドウの幅を 1 回だけ計算したことです。
サイズを変更すると、更新されません。
そのため、サイズ変更ロジック全体が何の効果もありません。

もう 1 つの間違いは、コントローラーで removePin メソッドを呼び出したことです。
シーン法です。

最後に、ロジックは既存のシーンを更新する代わりに毎回新しいシーンを作成します。

したがって、目的のロジックを適切に実現する方法は次のとおりです。

var controller = new ScrollMagic();

var sidebar = new ScrollScene({triggerHook: 0})
    .addTo(controller);

// page load
if($(window).width() >= 500) {
    sidebar.setPin("#sidebar-pin");
}

// resize
$(window).on('resize',function(){
    var w = $(window).width();
    if(w < 500) {
        sidebar.removePin("#sidebar-pin",true);
    } else if (w >= 640) {
        sidebar.setPin("#sidebar-pin");
    }
});

そして、ここにあなたのフィドルがあります：http://jsfiddle.net/jxoewzoo/1/

これが役に立てば幸いです、
J

于 2014-11-25T12:33:37.843 に答える
0

代わりに、このようなものには css mediaqueries を使用してください。

onscroll の js コード:

var otherwise = true
if(w < 500) {
        Do B;
        otherwise = false;
}
if(w > 640) {
        Do A;
        otherwise = false;
}
If(otherwise) {
     var sidebar = new ScrollScene()
    .triggerHook("0")
    .setPin("#sidebar-pin")
    .addTo(controller); 
 }
于 2014-11-21T01:37:19.443 に答える