javascript - 根据当前 ID 更改 CSS 类

Question

因此，我使用 jQuery scrollTop() 根据您所在页面(单页网站)的下层位置更改特定元素的 CSS 类。但是，这需要我在页面各部分的高度变大时调整 jQuery。

有什么好的方法可以根据您在页面中的当前ID更改CSS类吗？或者它是否需要基于你在像素方面的差距？

这是我目前使用的代码:

<script>

$(window).bind('scroll', function() {
        if($(this).scrollTop()>= 0 && $(this).scrollTop() < 550){
             $('.homeLink').addClass('selected');
         }
         else {
             $('.homeLink').removeClass('selected');
         }
    });

$(window).bind('scroll', function() {
        if($(this).scrollTop()>= 575 && $(this).scrollTop() < 1900){
             $('.photosLink').addClass('selected');
         }
         else {
             $('.photosLink').removeClass('selected');
         }
    });

$(window).bind('scroll', function() {
        if($(this).scrollTop()>= 1950 && $(this).scrollTop() < 3000){
             $('.aboutLink').addClass('selected');
         }
         else {
             $('.aboutLink').removeClass('selected');
         }
    });

</script>

让它根据其所在的 ID 进行更改真的很酷。有任何想法吗？

Answer 1

您可以获得具有特定 ID 的目标元素的位置，并根据您是否已到达该位置来更改窗口滚动功能的行为。

// in window scroll function do this
var pos = $(window).scrollTop();
var elemTop = $('#someElement').position().top;
if (pos > elemTop) {
  doSomething();
}

例如，看这个 fiddle