零基础学做网站培训介绍

当前位置:

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

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

发表评论

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

相关教程