Implementation of JavaScript ceiling lamp

Ceiling lamp is a common function of each site, it has two features

1. When you scroll down to the div position, the div remains fixed at the top of the page
2. When you scroll up to the original Div position, the div reverts to the original position in the document.

A div may be a category menu , or it may be an article navigation . Such as

Implementation ideas are as follows

1. Div is initially in the normal document stream
2. Add the Scroll event (event throttling) to the window, get the top value of the DIV's offset, scroll through the scrolltop value and the top comparison, add a fixed class to the div when you reach top and fix it
3. When scrolling up, the fixed class is deleted when the div initial top is reached, and the div goes back to the normal document stream
4. Fixed style non-IE6 browser uses position:fixed,ie6 with Position:absolute and IE expression

. fixed {    position:fixed;    top:0;    z-index:100;    -position:absolute;    -top:expression (eval (document.documentElement.scrollTop))}

　　

The implementation code for the jquery plugin is as follows

/* * ceiling light * Option {* Fixcls:classname, default "fixed" * Fixedfunc: callback function at ceiling) * Resetfunc: The callback function does not suck at the top *} */$.fn.topsuction = function (option) {option = option | | {} var fixcls = Option.fixcls | | ' fixed ' var fixedfunc = option.fixedfunc var resetfunc = option.resetfunc var $self = this var $win = $ (windo W) if (! $self. Length) return var offset = $self. Offset () var ftop = offset.top var fleft = offset.left/ /Staging $self. Data (' Def ', offset) $win. Resize (function () {$self. Data (' Def ', $self. Offset ())}) $win. Scrol            L (function () {var dtop = $ (document). ScrollTop () if (Ftop < dtop) {$self. addclass (FIXCLS) if (Fixedfunc) {Fixedfunc.call ($self, Ftop)}} else {$self. Removec Lass (FIXCLS) if (resetfunc) {Resetfunc.call ($self, Ftop)}})}; 

Two callbacks are provided here, Fixedfunc is called after fixed, and Resetfunc is called when it reverts to its initial state.

Example on line

Implementation of JavaScript ceiling lamp