Как изменить цвет ссылки на основе местоположения на странице?

Question

Я работаю над одностраничным сайтом, на котором есть верхняя панель навигации, с внутренними ссылками на различные разделы страницы. Моя цель - изменить цвет ссылок в зависимости от того, где вы находитесь на странице; если вы находитесь в разделе «Топ», тогда ссылка на «Верх» будет черной, а остальные - зелеными; если вы были в разделе «Услуги», тогда ссылка на «Службы» была бы черной, а все остальные были зелеными и т. д. Является ли это возможным, и если да, то каким образом я могу реализовать его с помощью HTML, 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'); 
}; 

Во-первых, добавить «активный класс для вашего CSS:

.active { 
    color: black; 
} 

Тогда ge т вертикальное положение прокрутки каждого 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'); 
} 

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