Stick div at top after scrolling demo

Made for the post:
JavaScript stick div at top on window scroll event:
http://www.sharingdailynotes.com/2015/09/04/javascript-stick-div-at-top-on-window-scroll-event/

Flexible JavaScript events

Written by John Resig at [1] http://ejohn.org/projects/flexible-javascript-events/

This is the project page for my entry [2] into the addEvent() recoding contest [3]. It works in all of the modern browsers: Windows IE 5+, Mozilla, Opera, and Safari. The code meets every item outlined in the guideline - attempting to be as short and simple as possible. You can view a demo [4] of it in action.

This library consists of two functions: addEvent and removeEvent. To use them, simply copy the code from below, paste it into your Javascript code, and call it using these methods:

addEvent( object, eventType, function );

The 'object' parameter should be the object upon which you want the event to be called.

The 'eventType' parameter should hold the name of the event, for example: 'click', 'mouseover', 'load', 'submit', etc. More can be found here [5].

The 'function' parameter should be a reference to a function that you wish to have called whenever the event fires. One parameter will be passed to 'function' - the event object.

Some examples of addEvent in use:

addEvent( document.getElementById('foo'), 'click', doSomething );
addEvent( obj, 'mouseover', function(){ alert('hello!'); } );
removeEvent( object, eventType, function );

removeEvent is virtually identical to addEvent, with the obvious difference: Instead of the function being added to the event handler, it is removed instead. All of the above code and parameters applies to this function.

The code, itself, is very short and simple - only 15 lines long:

function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function() { obj['e'+type+fn]( window.event ); }
obj.attachEvent( 'on'+type, obj[type+fn] );
} else 
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}

Much of the above code is trying to fix a serious problem with Internet Explorer. The code has to be this troublesome due to the fact that when your attached function gets fired, the 'this' reference refers to the worthless 'window', when, in fact, it should refer to the parent object. An explanation of the key points:

obj['e'+type+fn] = fn;

This makes the function a child of the specified object. The key, which is placed in the object hash, is (hopefully) unique and won't collide with any other function additions.

obj[type+fn] = function(){ obj['e'+type+fn]( window.event ); }

This line creates an anonymous function who, once executed, will fire the previously attached function - passing it the global event object. This whole function is being attached to the object so that it can be removed later, using the removeEvent() function.

Finally, for more information on the attachEvent, detachEvent, addEventListener, and removeEventListener functions - please refer to the excellent resource at Quirksmode [6].

If you have any additional questions concerning the above code, please feel free to ask [7].

Weblinks

[1] http://ejohn.org/projects/flexible-javascript-events/

[2] http://ejohn.org/apps/jselect/event.html

[3] http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.html

[4] http://ejohn.org/apps/jselect/event.html

[5] http://www.quirksmode.org/js/events_compinfo.html

[6] http://www.quirksmode.org/js/events_advanced.html

[7] http://ejohn.org/about/