如何根据页面上的位置更改 link 颜色？

Question

我在一个单页网站上工作，该网站顶部有一个导航栏，页面的各个部分都有内部 links。我的目标是根据您在页面上的位置让 link 改变颜色；如果你在“Top”部分，那么“Top”的 link 将是黑色的，而其他的都是绿色的；如果你在“服务”部分，那么“服务”的 link 将是黑色的，而其他所有的都是绿色的，等等。这可能吗，如果是的话，我将如何使用 [=24 来实现它=]、CSS 或 jQuery？如果有帮助，我正在使用 Foundation 来构建我的网站。我的代码摘录如下。

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();

    var splashOneHeight = $("div#splash-one").height();
    var servicesHeight = $("div#services").height();
    var splashTwoHeight = $("div#splash-two").height();
    var pricesHeight = $("div#prices").height();

    var firstFade = splashOneHeight - 50
    var secondFade = splashOneHeight + servicesHeight + 50
    var thirdFade = splashOneHeight + servicesHeight + splashTwoHeight
    var fourthFade = splashOneHeight + servicesHeight + splashTwoHeight + pricesHeight

    if (scrollDistance > 0) {
      $("nav").addClass("highlight");
    };
    if (scrollDistance == 0) {
      $("nav").removeClass("highlight");
    };

    if (scrollDistance >= 0 && scrollDistance < firstFade) {
      $("nav").css("opacity", '0.75');
    };
    if (scrollDistance >= firstFade && scrollDistance < secondFade) {
      $("nav").css("opacity", '0.96');
    };
    if (scrollDistance >= secondFade && scrollDistance < thirdFade) {
      $("nav").css("opacity", '0.75');
    };
    if (scrollDistance >= thirdFade && scrollDistance < fourthFade) {
      $("nav").css("opacity", '0.96');
    };
    if (scrollDistance >= fourthFade) {
      $("nav").css("opacity", '0.75');
    };
  });
})

jQuery(function($) {
  // from http://imakewebthings.com/jquery-waypoints/

  // Wicked credit to
  // http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
  var scrollElement = 'html, body';
  $('html, body').each(function() {
    var initScrollTop = $(this).attr('scrollTop');
    $(this).attr('scrollTop', initScrollTop + 1);
    if ($(this).attr('scrollTop') == initScrollTop + 1) {
      scrollElement = this.nodeName.toLowerCase();
      $(this).attr('scrollTop', initScrollTop);
      return false;
    }
  });

  // Smooth scrolling for internal links
  $("a[href^='#']").click(function(event) {
    event.preventDefault();

    var $this = $(this),
      target = this.hash,
      $target = $(target);

    $(scrollElement).stop().animate({
      'scrollTop': $target.offset().top
    }, 1000, 'swing', function() {
      window.location.hash = target;
    });

  });

});

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Arvo:400,700);
 nav {
  width: 100%;
  position: fixed;
  background-color: white;
  opacity: 0.75;
  height: 50px;
  top: 0px;
  left: 0px;
  z-index: 1000;
  transition: opacity 0.5s ease;
}
nav ul {
  display: block;
  list-style: none;
  text-align: center;
  position: relative;
  margin: 10px auto 0 auto;
  width: 500px;
}
nav ul li {
  display: inline;
  width: 150px;
  font-family: "Montserrat", sans-serif;
  padding: 0 20px;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
}
nav ul li a {
  transition: all 0.6s ease;
  color: #008040;
}
nav ul li a:hover {
  color: black;
}
nav.highlight {
  border-bottom: 3px solid rgba(190, 190, 190, 0.5);
  box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>DragonTech &mdash; Home</title>

  <link href="css/foundation.min.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.css" rel="stylesheet" type="text/css" />
  <link href="css/rippler.min.css" rel="stylesheet" type="text/css">
  <link href="css/normalize.css" rel="stylesheet" type="text/css" />
  <link href="css/filters.css" rel="stylesheet" type="text/css" />
  <link href="css/app.css" rel="stylesheet" type="text/css" />
  <link href="css/media.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <nav>
    <ul>
      <li><a class="top" href="#splash-one">Top</a>
      </li>
      <li><a class="services" href="#services">Services</a>
      </li>
      <li><a class="prices" href="#prices">Prices</a>
      </li>
      <li><a class="appointment" href="#splash-three">Contact us</a>
      </li>
    </ul>
  </nav>

  <script src="js/vendor/jquery.js" type="text/javascript"></script>
  <script src="js/vendor/jquery-ui.js" type="text/javascript"></script>
  <script src="js/foundation/foundation.min.js" type="text/javascript"></script>
  <script src="js/foundation/foundation.tooltip.js" type="text/javascript"></script>
  <script src="js/foundation/foundation.magellan.js" type="text/javascript"></script>
  <script src="js/vendor/modernizr.js" type="text/javascript"></script>
  <script src="js/app.js" type="text/javascript"></script>
  <script>
    $(document).foundation();
  </script>
</body>

Answer 1

您的 JQuery 中已有与此非常相似的内容，您可以在其中根据滚动位置设置导航不透明度：

if (scrollDistance >= 0 && scrollDistance < firstFade) {
  $("nav").css("opacity", '0.75');
};

首先，将 "active" class 添加到您的 CSS:

 .active { 
   color: black;
 }

然后获取每个div的垂直滚动位置：

var splashOnePosition = $("div#splash-one").offset().top;
//etc, for the rest of your divs

然后，当您滚动时，如果您的 scrollDistance 大于 divPosition，删除现有的 "active" classes，然后将其添加到正确的 div , 例如:

 if (scrollDistance > 0 && scrollDistance > splashOnePosition) {
   $('.active').removeClass('active');
   $('div#splash-one").addClass('active');
 }

Answer 2

我刚刚在你的脚本兄弟上添加了一些代码。希望这对你有用。

JS

$("a[href^='#']").click(function(event) {
    event.preventDefault();
    $('ul li a').removeClass( 'active-menu' );
    $(this).addClass( 'active-menu' );
    var $this = $(this),
      target = this.hash,
      $target = $(target);

    $(scrollElement).stop().animate({
      'scrollTop': $target.offset().top
    }, 1000, 'swing', function() {
      window.location.hash = target;
    }); 
});

CSS

ul li a{color: #008040;}
ul li .active-menu{color:#000;}

如何根据页面上的位置更改 link 颜色？

How to make link color change based on location on page?

html

css

navigation

jquery

zurb-foundation