我正在一个单页网站上工作，该网站的顶部有一个导航栏，并带有指向页面各个部分的内部链接。我的目标是使链接根据您在页面上的位置而更改颜色。如果您位于“顶部”部分，则指向“顶部”的链接将为黑色，而其他所有链接均为绿色；如果您位于“服务”部分，则指向“服务”的链接将为黑色，而其他所有链接均为绿色，等等。这是否可能，如果可以，我将如何使用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 — 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');
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句