如何根据页面上的位置更改链接颜色

我正在开发一个单页网站，该网站的顶部有一个导航栏，其中包含指向页面各个部分的内部链接。我的目标是让链接根据您在页面上的位置更改颜色;如果您在"顶部"部分，则指向"顶部"的链接将是黑色的，而所有其他链接都是绿色的;如果您在"服务"部分，则指向"服务"的链接将是黑色的，而所有其他链接都是绿色的，依此类推。这是否可能，如果是这样，我将如何使用HTML，CSS或jQuery实现它？如果有帮助，我正在使用基金会来构建我的网站。我的代码摘录如下。

$(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>

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

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

首先，在 CSS 中添加一个"活动"类：

 .active { 
   color: black;
 }

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

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

然后，当你滚动时，如果你的scrollDistance大于divPosition，删除现有的"活动"类，然后将其添加到正确的div，例如：

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

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

.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;}

相关内容

最新更新

热门标签：