Change nav text and logo color when scrolling
Question
I don't have much experience with HTML and CSS. I have a website with PagePiling.js scrolling. I want to let the color of my logo image and nav text change when I scroll to the next section, but just the part of the logo and nav that "crossed" the next section needs to change (I'm sorry, my English is not that good. Don't know how to explain this). That means that when the logo and nav text reach the grey section, they have to become a different color like red or something. Look at this code I found on CodePen, the part of the text which is still scrolled in the grey section is black, the part which is in the blue section is white. I've hosted my site at 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;
}
2 answers
solution1
0 2016-10-05 17:04:06
You forgot the javascript part that does all the magic..
As shown in your example from CodePen:
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
solution2
0 2016-10-05 17:05:22
<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>
*JS**
1
/* ===========================================================
2
* pagepiling.js 0.0.8 (Beta)
3
*
4
* https://github.com/alvarotrigo/pagePiling.js
5
* MIT licensed
6
*
7
* Copyright (C) 2014 alvarotrigo.com - A project by Alvaro Trigo
8
*
9
* ========================================================== */
10
11
(function(b){b.fn.pagepiling=function(c){function A(a){var c=b(".pp-section.active").index(".pp-section");a=a.index(".pp-section");return c>a?"up":"down"}function g(a,f){var d={destination:a,animated:f,activeSection:b(".pp-section.active"),anchorLink:a.data("anchor"),sectionIndex:a.index(".pp-section"),toMove:a,yMovement:A(a),leavingSection:b(".pp-section.active").index(".pp-section")+1};d.activeSection.is(a)||("undefined"===typeof d.animated&&(d.animated=!0),"undefined"!==typeof d.anchorLink&&c.anchors.length&&
12
(location.hash=d.anchorLink),d.destination.addClass("active").siblings().removeClass("active"),d.sectionsToMove=B(d),"down"===d.yMovement?(d.translate3d="vertical"!==c.direction?"translate3d(-100%, 0px, 0px)":"translate3d(0px, -100%, 0px)",d.scrolling="-100%",c.css3||d.sectionsToMove.each(function(a){a!=d.activeSection.index(".pp-section")&&b(this).css(m(d.scrolling))}),d.animateSection=d.activeSection):(d.translate3d="translate3d(0px, 0px, 0px)",d.scrolling="0",d.animateSection=a),b.isFunction(c.onLeave)&&
13
c.onLeave.call(this,d.leavingSection,d.sectionIndex+1,d.yMovement),C(d),D(d.anchorLink),E(d.anchorLink,d.sectionIndex),r=d.anchorLink,s=(new Date).getTime())}function C(a){c.css3?(t(a.animateSection,a.translate3d,a.animated),a.sectionsToMove.each(function(){t(b(this),a.translate3d,a.animated)}),setTimeout(function(){u(a)},c.scrollingSpeed)):(a.scrollOptions=m(a.scrolling),a.animated?a.animateSection.animate(a.scrollOptions,c.scrollingSpeed,c.easing,function(){n(a);n(a)}):(a.animateSection.css(m(a.scrolling)),
14
setTimeout(function(){n(a);u(a)},400)))}function u(a){b.isFunction(c.afterLoad)&&c.afterLoad.call(this,a.anchorLink,a.sectionIndex+1)}function B(a){return"down"===a.yMovement?b(".pp-section").map(function(c){if(c<a.destination.index(".pp-section"))return b(this)}):b(".pp-section").map(function(c){if(c>a.destination.index(".pp-section"))return b(this)})}function n(a){"up"===a.yMovement&&a.sectionsToMove.each(function(c){b(this).css(m(a.scrolling))})}function m(a){return"vertical"===c.direction?{top:a}:
15
{left:a}}function p(){return(new Date).getTime()-s<600+c.scrollingSpeed?!0:!1}function t(a,b,c){a.toggleClass("pp-easing",c);a.css({"-webkit-transform":b,"-moz-transform":b,"-ms-transform":b,transform:b})}function h(a){if(!p()){a=window.event||a;a=Math.max(-1,Math.min(1,a.wheelDelta||-a.deltaY||-a.detail));var c=b(".pp-section.active"),c=v(c);0>a?k("down",c):k("up",c);return!1}}function k(a,c){if("down"==a)var d="bottom",e=b.fn.pagepiling.moveSectionDown;else d="top",e=b.fn.pagepiling.moveSectionUp;
16
if(0<c.length)if(isScrolled(d,c))e();else return!0;else e()}function v(a){return scrollable=a.find(".pp-scrollable")}function w(){return window.PointerEvent?{down:"pointerdown",move:"pointermove",up:"pointerup"}:{down:"MSPointerDown",move:"MSPointerMove",up:"MSPointerUp"}}function x(a){var b=[];window.navigator.msPointerEnabled?(b.y=a.pageY,b.x=a.pageX):(b.y=a.touches[0].pageY,b.x=a.touches[0].pageX);return b}function F(a){a=x(a.originalEvent);l=a.y;touchStartX=a.x}function G(a){var f=a.originalEvent;
17
y(a.target)||(a.preventDefault(),a=b(".pp-section.active"),a=v(a),p()||(f=x(f),touchEndY=f.y,touchEndX=f.x,"horizontal"===c.direction&&Math.abs(touchStartX-touchEndX)>Math.abs(l-touchEndY)?Math.abs(touchStartX-touchEndX)>e.width()/100*c.touchSensitivity&&(touchStartX>touchEndX?k("down",a):touchEndX>touchStartX&&k("up",a)):Math.abs(l-touchEndY)>e.height()/100*c.touchSensitivity&&(l>touchEndY?k("down",a):touchEndY>l&&k("up",a))))}function y(a,f){f=f||0;var d=b(a).parent();return f<c.normalScrollElementTouchThreshold&&
18
d.is(c.normalScrollElements)?!0:f==c.normalScrollElementTouchThreshold?!1:y(d,++f)}function H(){b("body").append('<div id="pp-nav"><ul></ul></div>');var a=b("#pp-nav");a.css("color",c.navigation.textColor);a.addClass(c.navigation.position);for(var f=0;f<b(".pp-section").length;f++){var d="";c.anchors.length&&(d=c.anchors[f]);if("undefined"!==typeof c.navigation.tooltips){var e=c.navigation.tooltips[f];"undefined"===typeof e&&(e="")}a.find("ul").append('<li data-tooltip="'+e+'"><a href="#'+d+'"><span></span></a></li>')}a.find("span").css("border-color",
19
c.navigation.bulletsColor)}function E(a,f){c.navigation&&(b("#pp-nav").find(".active").removeClass("active"),a?b("#pp-nav").find('a[href="#'+a+'"]').addClass("active"):b("#pp-nav").find("li").eq(f).find("a").addClass("active"))}function D(a){c.menu&&(b(c.menu).find(".active").removeClass("active"),b(c.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}function I(){var a=document.createElement("p"),b,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",
20
MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var e in c)void 0!==a.style[e]&&(a.style[e]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[e]));document.body.removeChild(a);return void 0!==b&&0<b.length&&"none"!==b}var e=b(this),r,s=0,z="ontouchstart"in window||0<navigator.msMaxTouchPoints,l=touchStartX=touchEndY=touchEndX=0;c=b.extend({direction:"vertical",menu:null,verticalCentered:!0,sectionsColor:[],anchors:[],scrollingSpeed:700,
21
easing:"swing",loopBottom:!1,loopTop:!1,css3:!0,navigation:{textColor:"#000",bulletsColor:"#000",position:"right",tooltips:["section1","section2","section3","section4"]},normalScrollElements:null,normalScrollElementTouchThreshold:5,touchSensitivity:5,keyboardScrolling:!0,sectionSelector:".section",animateAnchor:!1,afterLoad:null,onLeave:null,afterRender:null},c);b.fn.pagepiling.setScrollingSpeed=function(a){c.scrollingSpeed=a};b.fn.pagepiling.setMouseWheelScrolling=function(a){a?e.get(0).addEventListener?
22
(e.get(0).addEventListener("mousewheel",h,!1),e.get(0).addEventListener("wheel",h,!1)):e.get(0).attachEvent("onmousewheel",h):e.get(0).addEventListener?(e.get(0).removeEventListener("mousewheel",h,!1),e.get(0).removeEventListener("wheel",h,!1)):e.get(0).detachEvent("onmousewheel",h)};b.fn.pagepiling.setAllowScrolling=function(a){a?(b.fn.pagepiling.setMouseWheelScrolling(!0),z&&(MSPointer=w(),e.off("touchstart "+MSPointer.down).on("touchstart "+MSPointer.down,F),e.off("touchmove "+MSPointer.move).on("touchmove "+
23
MSPointer.move,G))):(b.fn.pagepiling.setMouseWheelScrolling(!1),z&&(MSPointer=w(),e.off("touchstart "+MSPointer.down),e.off("touchmove "+MSPointer.move)))};b.fn.pagepiling.setKeyboardScrolling=function(a){c.keyboardScrolling=a};b.fn.pagepiling.moveSectionUp=function(){var a=b(".pp-section.active").prev(".pp-section");!a.length&&c.loopTop&&(a=b(".pp-section").last());a.length&&g(a)};b.fn.pagepiling.moveSectionDown=function(){var a=b(".pp-section.active").next(".pp-section");!a.length&&c.loopBottom&&
24
(a=b(".pp-section").first());a.length&&g(a)};b.fn.pagepiling.moveTo=function(a){var c="",c=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".pp-section").eq(a-1);0<c.length&&g(c)};b(c.sectionSelector).each(function(){b(this).addClass("pp-section")});c.css3&&(c.css3=I());b(e).css({overflow:"hidden","-ms-touch-action":"none","touch-action":"none"});b.fn.pagepiling.setAllowScrolling(!0);b.isEmptyObject(c.navigation)||H();var q=b(".pp-section").length;b(".pp-section").each(function(a){b(this).data("data-index",
25
a);b(this).css("z-index",q);a||0!==b(".pp-section.active").length||b(this).addClass("active");"undefined"!==typeof c.anchors[a]&&b(this).attr("data-anchor",c.anchors[a]);"undefined"!==typeof c.sectionsColor[a]&&b(this).css("background-color",c.sectionsColor[a]);c.verticalCentered&&b(this).addClass("pp-table").wrapInner('<div class="pp-tableCell" style="height:100%" />');q-=1}).promise().done(function(){c.navigation&&(b("#pp-nav").css("margin-top","-"+b("#pp-nav").height()/2+"px"),b("#pp-nav").find("li").eq(b(".pp-section.active").index(".pp-section")).find("a").addClass("active"));
26
b(window).on("load",function(){var a=window.location.hash.replace("#",""),a=b('.pp-section[data-anchor="'+a+'"]');0<a.length&&g(a,c.animateAnchor)});b.isFunction(c.afterRender)&&c.afterRender.call(this)});b(window).on("hashchange",function(){var a=window.location.hash.replace("#","").split("/")[0];a.length&&a&&a!==r&&(a=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".pp-section").eq(a-1),g(a))});b(document).keydown(function(a){if(c.keyboardScrolling&&!p())switch(a.which){case 38:case 33:b.fn.pagepiling.moveSectionUp();
27
break;case 40:case 34:b.fn.pagepiling.moveSectionDown();break;case 36:b.fn.pagepiling.moveTo(1);break;case 35:b.fn.pagepiling.moveTo(b(".pp-section").length);break;case 37:b.fn.pagepiling.moveSectionUp();break;case 39:b.fn.pagepiling.moveSectionDown()}});c.normalScrollElements&&(b(document).on("mouseenter",c.normalScrollElements,function(){b.fn.pagepiling.setMouseWheelScrolling(!1)}),b(document).on("mouseleave",c.normalScrollElements,function(){b.fn.pagepiling.setMouseWheelScrolling(!0)}));b(document).on("click touchstart",
28
"#pp-nav a",function(a){a.preventDefault();a=b(this).parent().index();g(b(".pp-section").eq(a))});b(document).on({mouseenter:function(){var a=b(this).data("tooltip");b('<div class="pp-tooltip '+c.navigation.position+'">'+a+"</div>").hide().appendTo(b(this)).fadeIn(200)},mouseleave:function(){b(this).find(".pp-tooltip").fadeOut(200,function(){b(this).remove()})}},"#pp-nav li")}})(jQuery);
Please check this link:- http://codepen.io/blossk/pen/aFbIo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
I want to change logo text color when the page scrolls down
Invert navigation text and logo color from white to black/colored when scrolling depending on color of background?
Change color when scrolling
Color will not change when scrolling
Change text color while scrolling
How to make menu and logo color change in scrolling menu?
Change logo img according to scrolling content background-color
How can I change the logo color by scrolling DIVs with specific classes?
How to change text color on scroll for a bootstrap nav
How to show different logo color when scrolling down in navbar in JS
Related Tags