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>