Question

我想要的是什么：

当页面向下滚动到顶部时页面（ heightwise等于视口的高度）不再可见，应该将一个CSS class（示例中为sticky）添加到标题菜单.header-menu-container-nav。
然后当用户开始向后滚动时，请尽快页面的一部分（页面的最高部分，高度相等到视口的高度），即.firstpage div来自例如我相信，滚动时触发的事件应该是已移除，应删除班级sticky。

我是如何尝试这样做的：

jquery-visible插件似乎根本不起作用。

我在我的HTML <head>中添加了jquery-visible插件（在解压缩从项目文件夹中下载的.zip之后），如下所示：

<script src="jquery-2.1.3.js"></script>
    <script type="text/javascript" src="jquery-visible-master/jquery.visible.js"></script>

请告诉我我做错了什么？以及如何使其发挥作用？

我的代码：

/**
* Function for the header's drama!
**/
$(window).bind('scroll', function(){

    var lastScrollTop = 0;
    var originalHeaderPosition =  $(".header-menu-container-nav").offset().top;

    var scrollTop = $(this).scrollTop();
    var vph = $(window).height();

    var currentHeaderPosition = $(document).scrollTop();
    var deltaHeaderPosition = currentHeaderPosition - originalHeaderPosition;

    if (scrollTop > lastScrollTop){ // downscroll code
        if (deltaHeaderPosition >= vph) {
            $('.header-menu-container-nav').addClass('sticky');
            $('.header-menu-container-nav').fadeIn();
        }
    } else {// upscroll code
        if ($('firstPage').visible(true)) {//*******************
            $('.header-menu-container-nav').fadeOut(function() {
                $('.header-menu-container-nav').attr('style','');
                $('.header-menu-container-nav').removeClass('sticky');
            });
        }
    }
       lastScrollTop = scrollTop;
});

Answer 1

你错过了＃34;。＆＃34;在以下几行中必须作为类提及。

 $('firstPage').visible(true)
 $('sticky').css('top', 0+'px');

请参阅here，我在您的javascript中添加了原始Jquery-visible-min并编辑了您的代码。

为什么我不能让jquery-visible插件工作呢？

1 个答案: