零基础学做网站培训介绍

当前位置:

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

什么是“触顶固定”

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

发表评论

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

相关教程

  • 什么是CSS3 盒布局在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并
  • 对于一些网络小白想建立一个网站,最方便的方法就是通过开源CMS程序来建网站。省去了复杂的编程过程,准备一些建网站所需要的条件后就可以自己建立一
  • 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。以前我们做这种WEB分享按钮使用的是百
  • 现在常用的邮箱有163邮箱、QQ邮箱。它们的特点就是邮箱后缀是各自网站的域名。如admin@163.com,admin@qq.com。下面学做网站论坛给大家介绍一下如何将
  • 我们知道,网站CDN加速可以有效的提升网站打开速度,降低网站服务器的负担。但是如果你网站同步了百度小程序,使用CDN加速就会出现一些意想不到的问题
  • 现在很多企业网站都安装了百度商桥,由于现在百度商桥只限百度推广用户使用,否则就需要收费了。那么我们也可自己制作一下类似百度商桥的网站在线留言
  • 公司建网站现在特别普遍了,很多公司都有自己的网站。至于公司建网站多少钱,企业网站制作价格要根据具体企业网站的要求不同而不同。下面学做网站论坛
  • 默认情况下,VIDEO视频标签播放视频时,它的速度是普通的速度播放。没有快速和慢速播放功能的。那么如何自己给VIDEO视频标签添加倍速播放功能呢?下面
  • 我们制作网站后,如果网站上需要支付功能的话,就需要给我们的网站对接微信支付功能。方便用户在我们网站上直接支付,这在学做网站论坛的建站培训课程
  • 如果我们想做一个视频网站,并且需要自动连续播放视频的话,可以使用jQuery代码来控制实现连续播放多个视频。通过new个video,指定播放列表的第一个视