スクロールがアンカーポイントに達したときにCSS要素を変更します

Question

現在、ページが特定のポイントに達したときにcss要素を変更するこの解決策がありますが、ピクセル値の代わりにアンカーポイントを使用したいと考えています（1804 ）を小さな画面で反応させることができます。私はそれが簡単にする必要があります知っているが、私はどのように見つけることができません：これは、現在の状態である

$(document).scroll(function(){ 
    if($(this).scrollTop() > 1804) 
    { 
     $('#voice2').css({"border-bottom":"2px solid #f4f5f8"}); 
     $('#voice3').css({"border-bottom":"2px solid #2e375b"}); 
    } 
}); 

：http://tibio.ch は

Answer 1

はこの試してみてください、ありがとう：

var targetOffset = $("#anchor-point").offset().top; 

var $w = $(window).scroll(function(){ 
    if ($w.scrollTop() > targetOffset) { 
     $('#voice2').css({"border-bottom":"2px solid #f4f5f8"}); 
     $('#voice3').css({"border-bottom":"2px solid #2e375b"}); 
    } else { 
     // ... 
    } 
}); 

Answer 2

function scroll_style() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#anchor-point').offset().top; 

    if (window_top > div_top){ 
     $('#voice2').css({"border-bottom":"2px solid #f4f5f8"}); 
     $('#voice3').css({"border-bottom":"2px solid #2e375b"}); 
    } 
} 
$(function() { 
    $(window).scroll(scroll_style); 
    scroll_style(); 
}); 

ソリューションベース：http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Answer 3

$(window).bind("scroll", function() { 
    var $sec1 = $('.bg1').offset().top; 
    var $sec2 = $('.bg2').offset().top; 
    var $sec3 = $('.bg3').offset().top; 
    var $sec4 = $('.bg4').offset().top; 
    var $sec5 = $('.carousel-indicators').offset().top; 

    if ($(this).scrollTop() < $sec2){ 
    $(".navbar1").fadeOut(); 
    $(".navbar2").fadeOut(); 
    $(".navbar3").fadeOut(); 
    }  
    if ($(this).scrollTop() > $sec2 & $(this).scrollTop() < $sec3){ 
    $(".navbar1").fadeIn(); 
    $(".navbar2").fadeOut();  
    } 
    if ($(this).scrollTop() > $sec3 & $(this).scrollTop() < $sec4){ 
    $(".navbar2").fadeIn(); 
    $(".navbar3").fadeOut(); 
    }  
    if ($(this).scrollTop() > $sec4 & $(this).scrollTop() < $sec5){ 
    $(".navbar3").fadeIn(); 
    $(".navbar2").fadeOut(); 
    }  
    if ($(this).scrollTop() > $sec5){ 
    $(".navbar1").fadeOut(); 
    $(".navbar2").fadeOut(); 
    $(".navbar3").fadeOut(); 
    }   
});