jquery - 窗口滚动更改菜单链接样式

Question

我正在尝试使用窗口滚动功能，以便菜单链接将其样式更改为用户滚动到的相关部分。

一旦他们滚动到投资组合部分，我就会提醒用户。但是链接的样式呢？

代码有点超出我的范围：

$(function(){
  $(window).scroll(function(){
    var aPortfolio = $('.portfoliowrapper').height();
    if($(this).scrollTop()>=aPortfolio){
        alert('portfolio just passed.');
    }
  });
});

Answer 1

您应该创建一个覆盖链接样式的类并添加/删除它：

CSS

.linkPortfolio {
    // styles
}

JS

$(function(){
  var $targetAnchor = $('#linkID');

  $(window).scroll(function(){
    var aPortfolio = $('.portfoliowrapper').height();
    if($(this).scrollTop()>=aPortfolio){
        alert('portfolio just passed.');
        $targetAnchor.addClass('linkPortfolio');
    } else {
        $targetAnchor.removeClass('linkPortfolio');
    }
  });
});

Answer 2

你只需要使用css：

if($(this).scrollTop()>=aPortfolio){
    alert('portfolio just passed.');
    $("yourlink").css({
        // Whatever styles you want here
    });
}