1

jQuery の scrollTop 機能について質問があります。垂直スクロールの量に基づいてクラスを切り替える機能です。

私が達成しようとしているのは、「section.banner」クラスを持つすべてのページで、バナーをスクロールした後、クラスが body タグに適用されることです。これにより、サイトのヘッダーにあるいくつかの 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');
        }
    });
}

toogleClass では動作しません。背景が点滅しています。

アップデート

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

解決策は、ウィンドウのサイズが変更されたときに上部を再計算することです:

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