最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function scrollfunction() {}根据下滑的高度来动态设置一些元素的布局,发现还是有点问题宽度有。干脆隐藏掉一些。
window.onscroll = function scrollfunction() { var dis = document.documentElement.scrollTop || document.body.scrollTop; var count = 0; if (dis > 750) { var userAgent = navigator.userAgent; if(userAgent.indexOf("Firefox")>-1){ $('#forumDiv').css({"position": "absolute", "left": "380px "}) $('#userInfoDiv').css({"position": "fixed", "width": "300px", "top": "50px"}) $('#hotKeyDiv').css({"position": "fixed", "right": "100px", "width": "300px", "top": "50px","display":"none"}) $('#toTop').css({"bottom":"150px"}) }else{ $('#forumDiv').css({"position": "absolute", "left": "380px "}) $('#userInfoDiv').css({"position": "fixed", "width": "400px", "top": "50px"}) $('#hotKeyDiv').css({"position": "fixed", "right": "100px", "width": "400px", "top": "50px"}) $('#toTop').css({"bottom":"150px"}) } count = 1; } else { $('#toTop').css({"bottom":"300px"}) // document.getElementById("institutionDiv").style.display="block"; // document.getElementById("upDiv").style.display="block"; $('#forumDiv').css({"position": "", "left": " "}) $('#userInfoDiv').css({"position": "", "width": ""}) $('#hotKeyDiv').css({"position": "", "right": "", "width": "","display":"block"}) } } $(window).resize(function () { var windowHeight= $(window).width(); if(windowHeight<1765){ document.getElementById('hotKeyDiv').style.display="none" }else{ document.getElementById('hotKeyDiv').style.display="block" } })
加上个判断浏览器的类型。。
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 if (isOpera) { return "Opera" }; //判断是否Firefox浏览器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否chorme浏览器 if (userAgent.indexOf("Chrome") > -1){ return "Chrome"; } //判断是否Safari浏览器 if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判断是否IE浏览器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; } //判断是否Edge浏览器 if (userAgent.indexOf("Trident") > -1) { return "Edge"; };