【问题标题】:jQuery cant check when window is scrolledjQuery无法检查窗口何时滚动
【发布时间】:2017-06-19 11:03:54
【问题描述】:

我正在使用 fullpage.js 插件,并且希望在用户滚动通过第一张幻灯片时将菜单从页脚转换到页眉。

在这个Page:

但是,全屏功能不允许我检查何时有滚动事件。

我写了这个:

$(window).scroll(function(){
  if ($(window).scrollTop() > $('.topDiv').position().top) {
    console.log('div hits top!');
  }
});

检查顶部的灰色 div 是否在窗口的顶部,但它不起作用。

偶数:

$(window).scroll(function(){ console.log('scrolling'); });

不工作。

【问题讨论】:

  • 它应该可以工作,可能有错误。打开你的控制台并检查

标签: javascript jquery fullpage.js


【解决方案1】:

我认为实现所需功能的最佳方式是使用 fullPage.js 提供的回调,而不是依赖于$(window).scroll()

您可以在每个回调中调用自定义函数:

onLeave: function(index, nextIndex, direction){}
afterLoad: function(anchorLink, index){}

然后您可以检查indexnextIndex 的值来执行所需的逻辑。

希望对您有所帮助。

【讨论】:

  • 感谢您的回复。是的,我看到了这一点,但我试图在单独的 js 文件中获取索引,所以我收到错误:“fullPage:Fullpage.js 只能初始化一次,而你正在执行多次!”
  • 让我知道您如何构建 Javascript 组件。为什么不能在初始化 fullPage.js 的同一个 javascript 文件上执行 callback 内的索引验证?
【解决方案2】:

也许这会有所帮助

    $('elem').bind('DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
           console.log('Down');
        } else {
           console.log('Up');
        }
        //prevent page fom scrolling
        return false;
    });

    //IE, Opera, Safari
    $('elem').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
             //scroll down
            console.log('Down');
        } else {
            console.log('Up');
        }
        //prevent page fom scrolling
        return false;
     });

【讨论】:

    猜你喜欢
    • 2017-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-26
    相关资源
    最近更新 更多