方法简单,加一段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>
这样这个区域版块,就会有滚动触顶固定的效果了。