Zmiana elementu CSS za pomocą JQuery, gdy scroll osiągnie punkt zakotwiczenia

Question

Mam obecnie to rozwiązanie, aby zmienić elementy css, gdy strona osiągnie określony punkt, ale chciałbym użyć # punktu kontrolnego zamiast wartości piksela (1804), aby reagować na mniejszych ekranach. Wiem, że to musi być łatwe, ale nie mogę znaleźć jak:

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

ten jest obecny stan: http://tibio.ch Dziękuję

Answer 1

Spróbuj tego:

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(); 
}); 

Rozwiązanie na podstawie: 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(); 
    }   
});