当滚动到达锚点时，使用JQuery更改CSS元素

我目前有这个解决方案，当页面到达某个点时更改css元素，但我想使用＃anchor-point而不是像素值（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

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

Answer 3

 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