1

我有一个关于 jQuery 的 scrollTop 功能的问题,它能够根据垂直滚动的数量来切换一个类。

我想要完成的是在任何带有“section.banner”类的页面上,在你滚动横幅之后,一个类将应用于正文标签。这将允许我更改站点标题中几个 SVG 的填充颜色,以及用于分页的固定定位侧导航。

我在 javascript 方面很糟糕,并且一直在搜索并试图获得它几个小时。任何帮助将不胜感激。这是我现在正在使用的代码(CodeKit 告诉我这是错误的,我并不感到惊讶)。200 的值只是一个占位符,将根据流体图像的高度计算。完全公开,我不知道括号和括号是否正确。

    // Header/Fixed Pagination Banner Scroll Recoloriing (toggle class)
    // Check If '.banner' Exists
    if( $('section.banner').length > 0) {

        $('body').scrollTop(function)() 
        {
            if $(window).scrollTop >= 200 {
                $('body').toggleClass('downtown');
                return false;
            }
        }
    }
4

1 回答 1

0

尝试这样的事情:

if( $('section.banner').length > 0) {

    $(window).scroll(function() {
    {

        if ($(window).scrollTop() >= $('section.banner').scrollTop()) {
            $('body').toggleClass('downtown');
            return false;
        }
    });
}

更新

我的代码有一点错误:http: //jsfiddle.net/t2yp15hq/

var top = $('section.banner').position().top;

if($('section.banner').length > 0) {

    $(window).scroll(function() {

        if ($(this).scrollTop() >= top) {
            $('body').addClass('downtown');

        }
        else
        {
            $('body').removeClass('downtown');
        }
    });
}

它不适用于togleClass,背景闪烁。

更新

http://codepen.io/anon/pen/wBWzXy

解决方案是在调整窗口大小时重新计算顶部:

$(window).resize(function(){
  top = $('section.story-intro').offset().top - 90;
});
于 2014-12-15T18:14:28.850 回答