云企logo

云企分享专用缩略图

导航栏滚动触顶固定特效代码

更新日期:2022-05-26  

方法简单,加一段JS代码就可以轻松实现,首先将需要触顶固定的区域代码,使用一个DIV包裹。

<div class="divgd">……</div>

再将以下的JS代码放到整个网页的底部;

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>/*JS代码需要引入JQUERY,可网上搜索下载替换*/
<
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));
});
};
//绑定
$(".divgd").smartFloat();
})
</script>

这样这个区域版块,就会有滚动触顶固定的效果了。

 

上一篇:什么是虚拟主机?

下一篇:PbootCMS内容详情页展示当前栏目更多文章,且过滤掉当前文章
首页
电话咨询