学做网站培训课程介绍

当前位置:

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

什么是“触顶固定”

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

发表评论

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

相关教程

  • Z-Blog是一款国内开发的网站程序,在开发过程中,我们怎么通过代码来判断文章所属的分类呢?可以通过以下的判断代码来实现。{if $article.Cat
  • 我们在做网站远程获取数据时,往往需要通过API接口来获取数据,在使用API接口之前,我们通常会使用PostMan软件来测试API是否正常。一些建网站新手不
  • 我们在本地环境下制作好网站之后,想把本地的网站搬家到互联网上,就需要将网站的程序和数据库导入到主机里。在使用阿里云主机导入数据库时,会出现这
  • 以前古文书籍的文字排序是从右到左,向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列,怎么实现呢?对于CSS3中已经有这样的属性来
  • 自从HTML5推出之后,网站上的视频可以像图片一样使用video标签直接播放了。但使用video播放视频有一个缺点就是只能播放小视频,如果视频比较大就会出
  • 现在网站上的注册功能多种多样,有普通的注册登录功能,也有通过手机短信验证注册功能。下面学做网站论坛介绍一下怎么制作网站手机短信验证注册功能。
  • 怎么做网站?我们自己做网站时,都有一系列的流程步骤的。下面介绍一下网站制作详细步骤。网站制作详细步骤第一步:确定好自己的网站域名。在选择
  • 在前端制作过程中,会使用FORM表单来提交数据,FORM表单中有一个checkbox复选框,可以同时选择多个信息来传递。那么如何使用PHP来接收从FORM表单发送
  • 宝塔创建的网站,默认情况下让你填写的是域名,没有注明是ip,但在没有备案的情况下,无法使用域名来访问,我们可以直接使用ip地址来访问,来看看如何
  • 什么是CSS3 盒布局在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并