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

根据当前ID更改CSS类

1 个答案: