【问题标题】:jQuery change class on navigation when div # scrolls horizontally into view当 div # 水平滚动到视图中时,jQuery 在导航上更改类
【发布时间】:2013-10-18 04:48:27
【问题描述】:

我已经看到了这个问题here,它非常有帮助,但是如果导航是水平的呢?当 div 从水平导航滚动到视图中时,我想在我的活动按钮上将类更改为活动状态。

现在我正在处理的网站,垂直和水平滚动,当它到达一个与它在同一轴上的其他 div 的 div 时,它会显示所选 html 中的第一个 div,即使是不在当前视图中。

那么,当 div 实际上在窗口视图中时,我如何检查轴和切换类?

谢谢

【问题讨论】:

    标签: jquery scrollview


    【解决方案1】:

    你可以像这样捕捉滚动事件。

    $('body').scroll(function(){
    
    });
    

    下面的行给出了滚动位置。

    $(window).scrollTop();
    $(window).scrollLeft();
    

    要注意进入的 div 每次滚动 body 时比较滚动值和 div-offset。

    if( $('#div').offset().left < $(window).scrollLeft() )
    {
        alert('I am in your view!');
    }
    

    也许您必须在计算中添加主体宽度。

    要切换一个类,有一个名为toggleClass 的函数。您也可以使用addClassremoveClass

    【讨论】:

    • Thx,对于迟到的评论很抱歉,但我没有收到这个答案的通知,正文大小是屏幕大小,是 100% 宽度吗?如何添加?
    • 如果正文的宽度等于屏幕的宽度,您将无法滚动。但你不需要知道体型。刚过了第 3 个代码块进入第 1 个。应该这样做。
    • 我会试试的,谢谢。关于 de body 大小,我认为如果 body 与屏幕大小相同,由于其内部的 div 更宽,仍会滚动。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-20
    相关资源
    最近更新 更多