Question

I am still a relative noob when it comes to javascript and especially going into jquery, prototype.js and such. I am trying to duplicate something similar to the http://giglocator.com header (or, to a lesser extent, TechCrunch’s redesigned header) where a portion of the header stays on screen once you scroll past a certain point. This boils down to changing header code from relative position to fixed position once a person has scroled past xxx number of pixels. I came across vinceh’s answer at Header changes as you scroll down (jQuery) which included a fiddle ( http://jsfiddle.net/KEjfe/ ) he created. I managed to tweak his code up to more or less do a giglocator type header using the following script code instead:

$("#body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 120 )
        $("#header").css("position", "fixed").css("top", "0");
    else
        $("#header").css("position", "relative").css("top", "120px");
});

So that is great except that I am trying to do this with a forum software package that uses prototype.js and scriptaculous. It seems like a waste to load jquery just for this (in addition to the others). Is there any way to convert the code above so that it works in prototype/scriptaculous? Or is there a way to just load jquery’s scrolltop?

Answer 1

Based on the fiddle here is the equivalent; http://jsfiddle.net/S7gpT/1/

Event.observe("body", "scroll", function() {
    var value = this.scrollTop;
    if ( value > 120 )
        $("header").setStyle({border: "1px solid blue"});
    else
        $("header").setStyle({border: "1px solid green"});
});

It looks very similar because when it comes to DOM the two libraries are functionally similar. The differences are circumstantial…

• $() takes an ID instead of CSS selector so it does not need a # character.
• The name of an event is passed as a string to observe() instead of using a dedicated function.
• scrollTop is an existing property of elements, no need to wrap it in another function.
• css() is replaced with setStyle()