善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是教你制作网站上的“滚动触顶固定”功能

傅汉松

什么是“触顶固定”

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

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

方法很简单,对于一段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。


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 教你制作网站上的“滚动触顶固定”功能
什么是“触顶固定”我们经常看到有些网站的某个版块,光标下拉滑动时,当这个版块触顶后,这个版块就是停留下来,一直显示在某个固定位置。这个有利于提高用户对这个版块内...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    95.62ms