我正在尝试编写一个脚本,如果屏幕具有一定宽度,该脚本将修复 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/
我的目标逻辑是:
- 页面加载时,如果窗口宽度大于 500,则执行 A。如果不是,则不执行任何操作。
- 调整窗口大小时,如果窗口宽度小于 500,则执行 B,如果窗口宽度大于 640,则执行 A。
我认为我的问题是我不确定如何在调整窗口大小后触发#2。
最佳答案
第一个问题是您只计算了一次窗口宽度(在页面加载时)。
一旦您调整大小,它就不会更新。
这就是为什么整个调整大小逻辑没有任何效果。
您犯的另一个错误是调用 Controller 上的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");
}
});
这是你的 fiddle :http://jsfiddle.net/jxoewzoo/1/
希望这有帮助,
J
关于javascript - 根据窗口大小有条件固定 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27052645/