如何用JS做固定在网页中的导航条

JavaScript019

如何用JS做固定在网页中的导航条,第1张

使元素固定在网页中，不需要用到JS的，只需要用到CSS样式就可以了。

使用css 中的   position:fixed fixed是相对于浏览器的定位，设置了这个样式的元素将不会随页面滚动而改变位置，固定在屏幕中。

如 ：

.classname {

position:fixed

left:0

top:0

z-index:9999

}

<script type="text/javascript">

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>