我们在做网页是有时会需要用到绝对定位这时需要判定元素离页面的距离。今天我们来看看怎么获取元素距离页面的top、left、right、bottom。

长沙网站开发

代码：

function getElemDis(el) {
var tp = document.documentElement.clientTop,
lt = document.documentElement.clientLeft,
rect = el.getBoundingClientRect();
return {
top: rect.top - tp,
right: rect.right - lt,
bottom: rect.bottom - tp,
left: rect.left - lt
}
}

我们直接用元素的getBoundingClientRect可以获取元素距离页面的距离。top和bottom则需要减去 html元素对象的上边框的宽度即clientTop而left和right则需减去clientLeft。

长沙网站建设

我们现有一案例要求左边导航随着滚动跳的位置与父标签的位置保持齐平，直接上代码。

如下：

<ul class="nav" id="navMenu">
<li> <a <eq name="category['title']" value="首页">href="javascript:void(0);" class="hov"<else/>href="{:U('/home')}"</eq>>首页</a><div class="snav"></div></li>
<volist name="pub.nav" id="nav">
<if condition="($breadnav[0]['title'] eq $nav['title']) or ($category['title'] eq $nav['title'])">
<li>
<a href="{$nav.url}" class="hov" target="_blank">{$nav.title}</a>
<div class="snav">
<dl>
<h2><a href="{$nav.url}">{$nav.title}</a></h2>
<?php
$data=get_cate_childlist($nav['id']);
for($i=0;$i<count($data[$i]);$i++){
?>
<dd><a href="{$data[$i]['link']}">{$data[$i]['title']}</a></dd>
<?php
}
?>
</dl>
 </div>
</li>
<else/>
<li>
<a href="{$nav.url}" class="" target="_blank">{$nav.title}</a>
<div class="snav">
<dl>
<h2><a href="{$nav.url}">{$nav.title}</a></h2>
<?php
$data=get_cate_childlist($nav['id']);
for($i=0;$i<count($data);$i++){
?>
<dd><a href="{$data[$i]['link']}">{$data[$i]['title']}</a></dd>
<?php
}
?>
</dl>
</div>
</li>
</if>
</volist>

现在我们需要让二级导航和以及导航位置一致，所以我们要用到滚动条的位置来进行判断，js代码如下：

网站开发

<script type="text/javascript">
$(".nav li").mouseenter(function(){
var index=$(this).index();
var height=$('.logo').height();
var tops=$(this).offset().top;
console.log(tops);
var top= document.documentElement.scrollTop;
if(index==0){
$(".snav").eq(index).hide();
}else{
$(".snav").eq(index).children("dl").css("position","absolute");
$(".snav").eq(index).children("dl").css("top",tops-top+"px");
$(".snav").eq(index).show();
}
})
$(".nav li").mouseleave(function(){
var index=$(this).index();
$(".snav").eq(index).hide();
})
</script>

以上就能保证您的一级导航和二级导航位置保持一致，不会因为滚动导致导航位置的变化,而且会随着屏幕的大小进行自适应的变化。

以上前端开发的小技巧您学会了吗？更多资讯与教程请关注我们，长沙企业站开发