为什么我根本无法让 jquery 可见插件工作

Why can't I get the jquery-visible plugin to work at all?

本文关键字：jquery 插件 工作 为什么      更新时间：2023-09-26

Complete SSCCE JSFiddle here！

我想要什么：

  1. 当页面向下滚动到顶部的程度时页面(高度等于视口的高度(不再可见，应将 CSS class(示例中sticky(添加到标题菜单.header-menu-container-nav .

  2. 然后，当用户开始向上滚动时，只要页面的一部分(页面的最顶层，高度相等到视口的高度(，.firstpage div即从我相信的例子，向下滚动时触发的事件应该是删除，应删除类sticky。

我是如何尝试这样做的：

使用 jquery-visible 插件：

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;
});

您在以下必须作为类提及的行中缺少"."。

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

看到这里，我在你的javascript中添加了原始的Jquery-visible-min并编辑了你的代码。

相关文章：