您的位置:首页 > 其它

导航栏固定 和 回到顶部 防抖动兼容ie6

2018-01-04 13:52 399 查看
js:

//固定定位和回到顶部

angular.element($window).bind('load', function() {
$scope.aa = function(obj, type, fn) { //窗口加载运行为指定的函数
if (obj.attachEvent) {
obj.attachEvent('on' + type, function() {
fn.call(obj);
})
} else {
obj.addEventListener(type, fn, false);
}
}
$scope.aa(window, 'scroll', function() {
var top = document.documentElement.scrollTop || document.body.scrollTop; //滚轮滚动的距离
var fixed_nav = document.getElementById("header_nav"); //获取到导航栏id
var brand_nav = document.getElementById('brandNav');
if (top > 130) { //当滚动距离大于130px时执行下面的东西
fixed_nav.style.position = 'fixed';
fixed_nav.style.top = '0';
fixed_nav.style.backgroundColor = 'rgba(253, 253, 253, 0.9)';
fixed_nav.style.boxShadow = '0 0 5px #888';
fixed_nav.style.zIndex = '9999';
brand_nav.style.position = 'fixed';
brand_nav.style.top = '78px';
brand_nav.style.width = '100%';
brand_nav.style.zIndex = '9999';

} else { //当滚动距离小于130的时候执行下面的内容,也就是让导航栏恢复原状
fixed_nav.style.position = 'static';
fixed_nav.style.boxShadow = 'none';
brand_nav.style.position = 'static';
}
});

var oTop = document.getElementById("to_top");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
$scope.aa(window, 'scroll', function() {
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrolltop > 666) {
oTop.style.display = 'block';
} else {
oTop.style.display = 'none';
}
});
var timer = null;
oTop.onclick = function() {
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
var oTops = document.body.scrollTop || document.documentElement.scrollTop;
if (oTops > 0) {
document.body.scrollTop = document.documentElement.scrollTop = oTops - 50;
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
}
});
}
});

css:

 body,

 html {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
font-size: 14px;
z-index: 0;
background: #ededed;

}

body{

    /*background-image:url(about:blank); /* for IE6 */ */

    background-attachment:fixed; /*必须*/

}

#to_top{

width:40px;

height:40px;

position: fixed;

z-index: 999; 

right:0;

bottom:0;

_position:absolute;

_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

overflow:hidden;

*zoom:1;

cursor:pointer;

background-color: rgba(255,255,255,0.6);

display: none;

}

html:

<!--回到顶部<-->
<div id="to_top"></div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: