洞察趋势 多维度提升品牌价值

新闻动态

Javascript之获取元素距离页面的top、left、right、bottom

所属栏目:发布日期:2022-10-28 16:40浏览量:1619作者:admin

我们在做网页是有时会需要用到绝对定位这时需要判定元素离页面的距离。今天我们来看看怎么获取元素距离页面的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>

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

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

-长沙网站建设,长沙网站开发,长沙网站设计,长沙网站制作,长沙软件开发,长沙系统开发,长沙做网站公司,长沙蒲公英网络

准备好做出改变了吗?

让我们共同助力您的企业数字化革新

您希望我们为您提供什么服务呢

· · · · · · · · ·

0731-84069615

/

扫一扫
技术大牛与您直接沟通

用户中心