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

    方法简单,加一段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>

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