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

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>


要实现导航栏固定不变,可以通过CSS中的position属性来实现。具体方法是: 1. 首先,在HTML中,需要将导航栏的位置设置为fixed,这样才能使导航栏固定不变。例如: ```html <nav class="navbar"> <!-- 导航栏内容 --> </nav> ``` 2. 然后,在CSS中,设置导航栏的样式,并将其position属性设置为fixed。例如: ```css .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #333; color: #fff; text-align: center; } ``` 其中,top属性设置为0,表示导航栏距离页面顶部的距离为0;left属性设置为0,表示导航栏距离页面左侧的距离为0;width属性设置为100%,表示导航栏的宽度为整个页面的宽度;height属性设置为50px,表示导航栏的高度为50像素;background-color属性设置为#333,表示导航栏的背景颜色为深灰色;color属性设置为#fff,表示导航栏的文字颜色为白色;text-align属性设置为center,表示导航栏中的文字居中显示。 3. 如果要兼容IE6,可以在CSS中使用CSS Hack的方法,例如: ```css .navbar { position: fixed !important; top: expression(eval(document.documentElement.scrollTop)); left: 0; width: 100%; height: 50px; background-color: #333; color: #fff; text-align: center; } ``` 其中,top属性使用了IE6的特殊语法,表示导航栏距离页面顶部的距离等于页面滚动条滚动的距离。由于IE6不支持position: fixed属性,需要使用这种特殊语法来实现。 4. 如果想要固定一个div,可以使用CSS中的position属性来实现。例如: ```html <div class="fixed-div"> <!-- 固定的div内容 --> </div> ``` ```css .fixed-div { position: fixed; top: 50px; left: 0; width: 100%; height: 100px; background-color: #ccc; color: #333; text-align: center; } ``` 其中,top属性设置为50px,表示固定的div距离页面顶部的距离为50像素;left属性设置为0,表示固定的div距离页面左侧的距离为0;width属性设置为100%,表示固定的div的宽度为整个页面的宽度;height属性设置为100px,表示固定的div的高度为100像素;background-color属性设置为#ccc,表示固定的div的背景颜色为浅灰色;color属性设置为#333,表示固定的div的文字颜色为深灰色;text-align属性设置为center,表示固定的div中的文字居中显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值