Home >Web Front-end >JS Tutorial >JavaScript ie6 compatible position:fixed implementation ideas_javascript skills

JavaScript ie6 compatible position:fixed implementation ideas_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 17:38:421009browse

positon:fixed allows the HTML element to be separated from the document flow and fixed at a certain position in the browser
There are often floating navigation bars in web pages that use this positioning mode, but this positioning is not compatible with IE6
Floating The important thing about the style of the navigation bar is position: fixed; bottom: 60px; (the bottom of the floating navigation is 60px from the bottom of the window)

Copy code The code is as follows:

.floating_9677{position:fixed; z-index:961; bottom:60px;}

positon:fixed does not work under ie6, only It can be achieved with js. First, under ie6, you need to set the position to absolute
Copy the code The code is as follows:

position:fixed;bottom:60px;_position:abosulte;

Add an attribute identifier to the floating elements, and js can find these floating elements through this attribute. tag="floatNavigator"
At work, the floating navigation bar is mainly positioned through top or bottom.
Copy code The code is as follows:

//ie6 compatible position: fixed
function fixedPositionCompatibility (){
//Determine whether the ie6 browser is
if( $.browser.msie || parseInt($.browser.version,10) <= 6){
var vavigators = $(" [tag='floatNavigator']");
if(!navigators.length)return;
//Judge whether each floating layer is fixed at the top or at the bottom
$.each(navigators, function( ){
this.top = $(this).css("top");
this.bottom = $(this).css("bottom");
this.isTop = this.top == "auto" ? false : true;
});
window.attachEvent("onscroll", function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
$.each(navigators, function(){
this.style.top = this.isTop ? scrollTop parseInt(this.top) "px" : scrollTop $(window).height() - $(this ).outerHeight() - parseInt(this.bottom) "px";
});
});
}
}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn