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

﹏ヽ暗。殇╰゛Y 2022-06-02 04:58 188阅读 0赞

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;