0

指定された量のピクセルをスクロールするたびに「アクティブ」クラスをリンクに設定するナビゲーションを作成しようとしています。しかし、ページには div があり、ユーザーの操作に基づいてサイズを取得します。

これは、アクティブなクラスを設定するためのコードです。

$(function() {
//caches a jQuery object containing the header element
    var header = $(".active");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >=760) {
        header.removeClass('active').addClass("active1");
    } 
    else { header.removeClass('active1').addClass('active');}
});

    var header1 = $("#work");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 759  && scroll < 780) {
        header1.removeClass('#work').addClass("active");
    } else {
        header1.removeClass("active").addClass('#work');
    }
});

var header2 = $("#about");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll > 779 && scroll < 1450) {
        header2.removeClass('#about').addClass("active");
    } else {
        header2.removeClass("active").addClass('#about');
    }
});

var header3 = $("#contact");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll > 1449) {
        header3.removeClass('#contact').addClass("active");
    } else {
        header3.removeClass("active").addClass('#contact');
    }
});
});

クラスがautoに設定されているdivの高さを取得して、上記のコードに適用するにはどうすればよいですか?

編集: を試しました$('#ID').height();が、ウェブサイトが読み込まれたときに高さが取得され、ユーザーが div を操作した後は機能しません。

4

2 に答える 2

0

私はこれがあなたが探しているものだと思います

サンプルデモ

if($("#ID").offset().top < $(window).scrollTop() + $(window).outerHeight())

フィドルを作成すると、おそらく同じことができます

これが役に立てば幸いです、ありがとう

于 2013-10-26T12:59:47.400 に答える