零基础学做网站培训介绍

当前位置:

教你制作网站上的“滚动触顶固定”功能

什么是“触顶固定”

我们经常看到有些网站的某个版块,光标下拉滑动时,当这个版块触顶后,这个版块就是停留下来,一直显示在某个固定位置。这个有利于提高用户对这个版块内容的点击。也常用于网站上的广告位。

div触顶固定悬浮在浏览器顶部

怎么做网站上的“滚动触顶固定”功能

方法很简单,对于一段JS代码就可以轻松实现。步骤如下:

首先将需要触顶固定的区域代码,使用一个DIV包裹。


<div class="contactgundong">……</div>

再将以下的JS代码放到整个网页的最底部;


<script type="text/javascript">
$(function(){
/*按钮固定层*/

$.fn.smartFloat = function () {
var position = function (element) {
var top = element.offset().top, pos = element.css("position");
$(window).scroll(function () {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({ position: "fixed", top: 0 });
} else {
element.css({ top: scrolls });
}
} else {
element.removeAttr("style");
}
});
};
return $(this).each(function () {
position($(this));
});
};
//绑定
$(".contactgundong").smartFloat();
})
</script>

这样这个区域版块,就会有滚动触顶固定的效果了。

最后提醒

以下的JS代码需要引入JQUERY,所以不要忘记在自己的代码里先引入JQUERY。方法见:网页如何引入JQuery

发表评论

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

相关教程

  • 客服框在很多网站都会有,客服框的样式也有很多种,今天学做网站论坛给大家介绍一下比较热门的客服框-悬浮式QQ+微信+电话客服框的制作方法。先看下制
  • 在做网站时,为了让整个网站看起来更加动感,我们常常会在网站上放一些特效。例如,当鼠标经过时网站图片纵向Y轴旋转这个功能就是在很多网站上使用了
  • jsonp跨域请求是指不同的域名网站之间进行数据请求与获取。由于网站安全机制,服务器一般都是设置了防跨站请求的,如果我们想跨域请求数据,所以AJAX
  • 网上有很多的调查类单网页,可以用于用户在线填写提交。然后管理员可以在后台查看到用户的留言信息。效果如下图:下面学做网站论坛就介绍一下怎么制
  • 在做网站时,有时需要给用户一个定时提醒的功能,当超过自己设定的时间之后,就会显示提醒内容。这个功能在很多网站开发公司用于网站续费提醒。下面
  • 在制作网站过程中,有时需要获取到一串代码里某个图片的地址,这个就需要使用到PHP正则提取,通过正则匹配到图片的src地址并且输出src地址。PHP实现
  • 织梦程序与Wordpress程序都是使用量比较大的开源网站程序,但织梦程序的安全性实在不敢恭维。有些使用织梦程序建网站的用户咨询怎么把自己的织梦网站
  • 现在很多企业网站上都有位置地图功能,方便用户查看公司的位置。让企业网站更有信任感。效果如下图:网站上添加位置地图功能,一般是使用百度地图AP
  • 现在很多网站都有这样的效果,一篇文章文字比较多,刚开始并不会将所有内容都展现给浏览者,而是显示一部分内容,然后在底部有一个“展开按钮”,点击后
  • 在做一些模板演示网站时,通常需要使用IFRAME调用演示网站。如果演示网站是自己的网站没有问题,如果IFRAME调用的是别人的网站,就会存在这样的问题,