Question

有没有机会给我们一个脚本处理原型（scriptaculous和效果），例如：http://jsfiddle.net/alextercete/ShPXJ/（用jQuery制作）

<style>
#someDiv {
display: none;
position: fixed;
top: 0;
left: 0;
background: red;}
</style>

<script>
$(window).scroll(function () {
var $someDiv = $("#someDiv"),
    top = $(this).scrollTop();

if (top > 200) {
    $someDiv.show();
} else {
    $someDiv.hide();
}});</script>

Answer 1

以最简单的形式，脚本可以是：

Event.on(window, 'scroll', function() {
    Element.toggle('someDiv', pageYOffset > 200);
});

^{（jsfiddle - 注意，需要新的内联样式）}

但是如果你想添加一些合理的效果，那就有一个复杂的问题。页面滚动事件反复触发，这可能会触发对同一元素的多重影响并造成混乱。 Scriptaculus允许您将选项传递给fix：

var options = {queue: {position: 'end', scope: 'demo', limit: 1}};
Event.on(window, 'scroll', function() {
    (pageYOffset > 200 ? Effect.Appear : Effect.Fade)('someDiv', options);
});

^{（jsfiddle）功能}

您可以使用Appear和Fade，或BlindUp和BlindDown来代替SlideUp和SlideDown方法。

使用“原型”滚动时显示/隐藏div

1 个答案: