Change CSS element with JQuery when scroll reaches an anchor point

Question

I currently have this solution to change the css elements when the page reaches a certain point but I'd like to use an #anchor-point instead of the pixel value (1804) to be responsive on smaller screens. I know it must be easy but I can't find how:

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

This is the current state: http://tibio.ch Thank you,

Answer 1

Try this:

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

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