CODEWITHSUNDEEP
prototypejs
yazuk
yazuk

Reputation: 107

Show/Hide a div when scrolling with "prototype"

Is there any chance to give us a script working with prototype (scriptaculous and effects) like the one on:http://jsfiddle.net/alextercete/ShPXJ/ (made with with 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>

Upvotes: 0

Views: 183

Answers (1)

clockworkgeek
clockworkgeek

Reputation: 37700

In it's simplest form the script could be this:

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

(jsfiddle - note, a new inline style is necessary)

But if you wanted to add some effects, which is reasonable, then there is a complication. The page scroll event fires repeatedly which could trigger multiple effects on the same element and make a mess. Scriptaculus lets you pass options to fix this:

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

(jsfiddle)

Instead of Appear and Fade methods you could instead use BlindUp and BlindDown, or SlideUp and SlideDown.

Upvotes: 1

Related Questions