function htmlScroll() {
var top = document.body.scrollTop || document.documentElement.scrollTop
if (elFix.data_top <top)
{
elFix.style.position = 'fixed'
elFix.style.top = 0
elFix.style.left = elFix.data_left
}
else
{
elFix.style.position = 'static'
}
}
function htmlPosition(obj)
{
var o = obj
var t = o.offsetTop
var l = o.offsetLeft
while (o = o.offsetParent)
{
t += o.offsetTop
l += o.offsetLeft
}
obj.data_top = t
obj.data_left = l
}
var oldHtmlWidth = document.documentElement.offsetWidth
window.onresize = function() {
var newHtmlWidth = document.documentElement.offsetWidth
if (oldHtmlWidth == newHtmlWidth)
{
return
}
oldHtmlWidth = newHtmlWidth
elFix.style.position = 'static'
htmlPosition(elFix)
htmlScroll()
}
window.onscroll = htmlScroll
var elFix = document.getElementById('fixedRight')
htmlPosition(elFix)
</script>
使元素固定在网页中,不需要用到JS的,只需要用到CSS样式就可以了。
使用css 中的 position:fixed fixed是相对于浏览器的定位,设置了这个样式的元素将不会随页面滚动而改变位置,固定在屏幕中。
如 :
.classname {
position:fixed
left:0
top:0
z-index:9999
}