当滚动到达锚点时，使用JQuery更改CSS元素 [英] Change CSS element with JQuery when scroll reaches an anchor point

问题描述

我目前有这种解决方案，可以在页面到达特定点时更改css元素，但是我想使用#anchor-point而不是pixel值(1804)来响应较小的屏幕.我知道这一定很容易，但是我找不到方法:

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

这是当前状态: http://tibio.ch 谢谢

推荐答案

尝试一下:

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 {
      // ...
    }
});

这篇关于当滚动到达锚点时，使用JQuery更改CSS元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！