jquery - 如何设置导航以更改某些点的字体颜色？

Question

我的网站顶部只有一个基本的水平导航栏。该网站是一个很长的单页网站，在某些地方有不同颜色的背景。我想知道如何在某些点将字体颜色从一种颜色更改为另一种颜色。

Answer 1

当窗口滚动到您想要的数量后，您需要向您的链接添加一个类。

所以你会设置你的默认颜色

a{color:red;}

然后是你想要改变的类

a.changeColor{color:green}

然后在滚动上运行一个函数(这些对性能不利)

$window = $(window),
$nav = $('.nav'),
scrollTop = $window.scrollTop();

$window.scroll(function(){
    scrollTop = $window.scrollTop();
  if(scrollTop > 500){
    $nav.children('a').addClass('changeColor');
  }else{
    $nav.children('a').removeClass();
  }
})

https://jsfiddle.net/hahrywa6/2/

我已经对此进行了编辑，因此您也可以定位 div，这样您就不需要对值进行硬编码。这可能更适合您。

为此，创建一个变量，该变量将以您想要在导航点击时更改文本颜色的 div 为目标。

var yourDiv = $('.yourDivName').offset().top;

找到它相对于顶部的偏移量。现在只需在 if 语句中对它使用相同的 scrollTop 变量。如果窗口滚动超过你的元素，你想添加类。

var $window = $(window),
$nav = $('.nav'),
scrollTop = $window.scrollTop(),
triggerDiv = $('#trigger-div').offset().top;
$window.scroll(function(){
    scrollTop = $window.scrollTop();
  if(scrollTop > 500){
    $nav.children('a').removeClass().addClass('changeColor');
  }else{
    $nav.children('a').removeClass();
  }
  if(scrollTop > triggerDiv){
    $nav.children('a').removeClass().addClass('changeColor2');
  }
})

https://jsfiddle.net/hahrywa6/2/