我对HTML和CSS没有多少经验。我有一个带有PagePiling.js滚动的网站。当我滚动到下一部分时，我想让我的徽标图像和导航文本的颜色发生变化，但只是标识和导航的部分“＃34;交叉”＃34;下一部分需要改变（对不起，我的英语不太好。不知道如何解释这个）。这意味着当徽标和导航文本到达灰色部分时，它们必须变成不同的颜色，如红色或其他东西。 Look at this code I found on CodePen,仍然在灰色部分滚动的文本部分是黑色，蓝色部分中的部分是白色。我已经在http://informatica.thebrandcode.nl/托管了我的网站。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.pagepiling.js"></script>
<script>
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
</head>
<body>
<div class="navbar">
<a id="logo" href="index.html"></a>
<div class="nav">
<a href="index.html">Home</a>
<a href="#">Nieuws</a>
<a href="#">Forum</a>
<a href="#">Things I ❤</a>
<a href="#">Contact</a>
</div>
</div>
<div id="pagepiling">
<div class="section" id="header">
<div class="header-content-container">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
</div>
</div>
</div>
<div class="section" id="section1">
Placheholder
</div>
<div class="section" id="section2">
Placheholder
</div>
<div class="section" id="section3">
Placheholder
</div>
</div>
</body>
</html>
CSS：
/* BASICS */
@font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
@font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
html, body {
overflow:hidden;
margin: 0;
padding: 0;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* PAGEPILING */
.pp-section {
height:100%;
position:absolute;
width:100%;
}
.pp-easing {
-webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
}
.pp-section.pp-table{
display: table;
}
.pp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.pp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
}
.pp-tooltip.right {
right: 20px;
}
.pp-tooltip.left {
left: 20px;
}
.pp-scrollable{
overflow-y: scroll;
height: 100%;
}
/* NAVBAR */
.navbar {
width: 80%;
margin: auto;
left: 0;
right: 0;
height: 150px;
position: fixed;
z-index: 999;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo2.png) no-repeat;
background-size: contain;
float: left;
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #000000;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.nav a:hover {
text-decoration: underline;
}
/* SECTIONS */
#header {
background-color: #ffffff;
}
.header-content-container {
position: absolute;
bottom: 20px;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #000000;
text-align: right;
}
#section1 {
background-color: #f2f2f2;
}
#section2 {
background-color: #ffffff;
}
#section3 {
background-color: #f2f2f2;
}
答案 0 :(得分：0)
你忘记了完成所有魔法的javascript部分..
如CodePen中的示例所示：
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
答案 1 :(得分：0)
app_settings* JS **
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin</title>
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700" />
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function(){
$('#pp-nav').addClass('custom');
},
afterLoad: function(anchorLink, index){
if(index>1){
$('#pp-nav').removeClass('custom');
}else{
$('#pp-nav').addClass('custom');
}
}
});
/*
* Internal use of the demo website
*/
$('#showExamples').click(function(e){
e.stopPropagation();
e.preventDefault();
$('#examplesList').toggle();
});
$('html').click(function(){
$('#examplesList').hide();
});
});
</script>
</head>
<body>
<a href="https://github.com/alvarotrigo/pagePiling.js"></a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://alvarotrigo.com/pagePiling/" data-text="Great plugin to create a single scrolling page pagePiling.js: ">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=alvarotrigo&repo=pagePiling.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="152" height="20" id="starGithub"></iframe>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
<li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<h1>pagePiling.js</h1>
<p>Create an original scrolling site</p>
<img src="http://alvarotrigo.com/pagePiling/imgs/pagePiling-plugin.gif" alt="pagePiling" />
<br />
<div id="download"><a href="https://github.com/alvarotrigo/pagePiling.js/archive/master.zip">Download</a></div><br />
<p id="donations">
<a href="http://vk.cc/35R1HD">
Donations will be appreciated!</a></p>
</div>
<div class="section" id="section2">
<div class="intro">
<div id="colors"></div>
<h1>jQuery plugin</h1>
<p>Pile your sections one over another and access them scrolling or by URL!</p>
<div id="markup">
</div>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Configurable</h1>
<p>Plenty of options, methods and callbacks to use.</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<h1>Compatible</h1>
<p>Designed to work on tablet and mobile devices.</p>
<p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p>
</div>
</div>
</div>
<div id="infoMenu">
<ul>
<li><a href="https://github.com/alvarotrigo/pagePiling.js/archive/master.zip">Download</a></li>
<li>
<a href="http://alvarotrigo.com/pagePiling/" id="showExamples">Examples</a>
<div id="examplesList">
<div class="column">
<h3>Navigation</h3>
<ul>
<li><a href="http://alvarotrigo.com/pagePiling/examples/horizontalScroll.html">Horizontal scroll</a></li>
<li><a href="http://alvarotrigo.com/pagePiling/examples/noAnchor.html">Without anchor links (same URL)</a></li>
<li><a href="http://alvarotrigo.com/pagePiling/examples/looping.html">Looping</a></li>
</ul>
</div>
<div class="column">
<h3>Design</h3>
<ul>
<li><a href="http://alvarotrigo.com/pagePiling/examples/backgrounds.html">Full backgrounds</a></li>
<li><a href="http://alvarotrigo.com/pagePiling/examples/videoBackground.html">Full background videos</a></li>
</ul>
</div>
<div class="column">
<h3>Callbacks</h3>
<ul>
<li><a href="http://alvarotrigo.com/pagePiling/examples/callbacks.html">Callbacks</a></li>
</ul>
</div>
</div>
</li>
<li><a href="https://github.com/alvarotrigo/pagePiling.js#pagepilingjs">Documentation</a></li>
<li><a href="http://alvarotrigo.com/#contact-page">Contact</a></li>
</ul>
</div>
</body>
请检查此链接： - http://codepen.io/blossk/pen/aFbIo