学做网站培训课程介绍

当前位置:

JS实现Div滚动到指定位置固定

我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到指定位置固定特效

div滚动到顶部固定不滚动特效可以让我们想把一个重要的内容总是让用户一眼看到。例如我们自己网站发布的最新文章,不管用户怎么拖动电脑的下拉条,它总是显示在屏幕顶端,如下图。

制作div滚动到顶部固定不滚动特效

我们自己做网站时怎么能做出这样一种div滚动到顶部固定不滚动的效果呢?下面就来列出做出这种div滚动到顶部固定不滚动的所有代码。

制作出的效果如下:

固定区域到顶部之前:
制作div滚动到顶部固定不滚动特效

固定区域到顶部之后,自动固定。
制作div滚动到顶部固定不滚动特效

代码如下:(此代码包括了HTML代码和CSS样式代码以及JS特效代码)了解更多的代码知识,可学习html视频教程

首先将需要顶部固定的区域使用<div id="nav_keleyi_com">包裹起来,然后在网页的特别底部放上以下的JS代码,用于控制这个区域顶部滚动固定。


<script type="text/javascript" >
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;

window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
obj.style.top = '0';
}else{
obj.style.position = 'fixed';
obj.style.top = '40px';
}
}
</script>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav_keleyi_com');
}
</script>

通过以上的代码,我们就可以在自己建网站时,制作一个固定区域,放一些自己网站比较重要的文章链接了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如果我们的网站有港澳台的用户,那么网站特别好是能支持文字简繁互转,这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时,实
  • 我们都知道在做网站时,加载的文件越少速度就会越快,包括CSS、JS、图片、数据库等等,特别是门户网站建设更是如此。要减少这些文件的载入,特别
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 做网站过程中,如果想对自己网站中的文章进行排序,就可以利用热门文章代码来自动调用,热门文章可以分为二种方法:按照文章浏览量和文章评论数。
  • 使用wordpress建网站时,在侧边栏往往需要调用某个指定分类下的子分类,这样只要在网站后台添加分类后,网站界面就会自动的调用显示出来。(要想在不
  • 对于很多制作企业网站的学员来说,少不了“联系我们”这一栏,对于大多数网站制作的学员来说,只会写公司名称,公司电话,公司地址之类,最多也只会加一
  • 我们在自己建网站时,由于网站版面幅度的限制,我们之前讲制作大型门户网站鼠标移动tab切换栏目,今天我们讲另一种突破网页限制的特效- div滚动到指定
  • 在我们实际自己做网站时,往往为了方便用户点击导航栏里的栏目,需要将自己网站的导航栏一直固定在顶部。即使用户将网页往下拉时,也一直在浏览器的顶