HTML页面js实现向下拉加载更多,下拉隐藏导航条

介绍

        对于vue 这些前端框架来说，下拉加载功能在很多UI框架中都包含得有，很少会有人写，但是对于一般html却需要自己写，记录一下下面对下来加载更多的实现，虽然是小功能，但是每次都去找一遍也挺麻烦的。

浏览器窗口滚动下拉加载更多 （loadData是自己的数据加载方法）

<div id="loading" class="text-center d-none">
                    <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>

                <div id="no-more" class="loading-tip d-none">
                    <p class="text-secondary">
                        没有更多
                    </p>
                </div>

   
var loaded = false;
  var nomore = false;
/* 滚动加载数据 */
   $(window).scroll(function () {
                if ($(document).height() - ($(document).scrollTop() + $(window).height()) < 10) {

                    if (loaded)
                        return;

                    // 没有更多
                    if (nomore)
                        return;

                    loaded = true;

                    $('#loading').removeClass("d-none");

                    /*延时效果加载数据*/
                    setTimeout(function () {
                        loadData();
                        loaded = false;
                        $('#loading').addClass("d-none");
                    }, 500);
                }
            });

由于是在局域网，延时是为了让加载动画出现，好看一点，如果是互联项目，则不需要，有的访问本来就慢。

滚动指定区域，加载更多数据

        这个实现只是临时解决办法，目前没有更好的，每天赶项目，只能先记录下来。

<div id="wrapper" data-url="/api"  >
        <ul class="content">
        </ul>

        <p id="noMoreTip" class="text-secondary d-none" >没有更多视频</p>
        <div id="loading" ></div>
    </div>

  var element = $('#wrapper')
   element.scroll(function () {
                    var boxHeight = $(this).height();
                    var scrollTop = $(this).scrollTop();
                    var contentHeight = $($(this).children()[0]).height();

                    if (contentHeight - (boxHeight + scrollTop) < 0) {
                        loadData();
                    }
                });

滚动指定位置隐藏顶部菜单

banner 元素就类似首页banner图，main-nav则是顶部导航栏，动画效果可以自己找一些更好的。

     /* 滚动加载数据 */
        $(window).scroll(function () {
            var banner = $('#banner')
            var nav = $('#main-nav')
            if ($(document).scrollTop() > (banner.height() - nav.height() )) {
                nav.fadeOut();
            }
            else
            {
                nav.fadeIn();
            }
        });