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