Jquery is compatible with ie6 after scrolling to the navigation bar and floating stop on the top of the page

This article will introduce you in detail a jquery code compatible with the ie6 instance on the top of the suspended page after scrolling to the navigation bar. For more information, see.

Jquery Implementation Method

The Code is as follows:

Copy code

<Script type = "text/javascript"> $ (Function (){ If ($. browser. msie & ($. browser. version = "6.0 ")&&! $. Support. style ){ Var handler, sTop, dTop; DTop = $ ("# fixedNav"). offset (). top $ (Window). bind ('scroll ', function (){ Window. clearTimeout (handler ); Handler = window. setTimeout (function (){ STop = $ (document). scrollTop (); STop> dTop? $ ("# FixedNav" ).css ("top", sTop-dTop): $ ("# fixedNav" ).css ("top", 0 ); $ ("# FixedNav" ).css ({"position": "relative", "z-index": "1200 "}); }, 60 ); }); } Else { Var topMain = $ ("# fixedNav"). offset (). top $ (Window). scroll (function (){ If ($ (window). scrollTop ()> topMain ){ $ ("# FixedNav"). addClass ("nav_scroll "); } Else { $ ("# FixedNav"). removeClass ("nav_scroll "); } }); } }); </Script>

Css code

The Code is as follows:	Copy code
. Nav_scroll {position: fixed; top: 0; left: 0; z-index: 1200; width: 100% ;}

Html

The Code is as follows:	Copy code
<Div id = fixedNav> jquery implements ie6 compatibility at the top of the suspended page after scrolling to the navigation bar, where content is placed </div>

A section of js Code is provided below

 

The Code is as follows:

Copy code

<Script type = "text/javascript"> Function htmlScroll () { Var top = document. body. scrollTop | document.doc umentElement. scrollTop; If (elFix. data_top <top) { ElFix. style. position = 'fixed '; ElFix. style. top = 0; ElFix. style. left = elFix. data_left; } Else { ElFix. style. position = 'static '; } } Function htmlPosition (obj) { Var o = obj; Var t = o. offsetTop; Var l = o. offsetLeft; While (o = o. offsetParent) { T + = o. offsetTop; L + = o. offsetLeft; } Obj. data_top = t; Obj. data_left = l; } Var oldHtmlWidth = document.doc umentElement. offsetWidth; Window. onresize = function (){ Var newHtmlWidth = document.doc umentElement. offsetWidth; If (oldHtmlWidth = newHtmlWidth) { Return; } OldHtmlWidth = newHtmlWidth; ElFix. style. position = 'static '; HtmlPosition (elFix ); HtmlScroll (); } Window. onscroll = htmlScroll; Var elFix = document. getElementById ('fixedright '); HtmlPosition (elFix ); </Script>