<body class="df-light">
<div id="nav">
<a href="#" class="logo">
<img src="https://www.7-cha.com/images/logo-dark.png">
<img src="https://www.7-cha.com/images/logo.png">
</a>
</div>
<div class="block div1" data-color="light"></div>
<div class="block div2" data-color="dark"></div>
<div class="block div3"></div>body.df-light .logo>img:nth-of-type(2){
display: none;
}
body.df-light.mwt-dark .logo>img:nth-of-type(1){
display: none;
}
body.df-light.mwt-dark .logo>img:nth-of-type(2){
display: block;
}
#nav{
position: fixed;
z-index: 999
}
.div1{height:200px;}
.div2{height:1000px; background: #111;}
.div3{height: 1000px; background:#fff;}$(function(){
$(window).scroll(function() {
// selectors
var $window = $(window),
$body = $('body'),
$block = $('.block');
var scroll = $window.scrollTop() + ($window.height() / 25);
$block.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Remove all classes on body with color-
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)mwt-\S+/g) || []).join(' ');
});
if(typeof($(this).data('color')) !== 'undefined') {
$body.addClass('mwt-' + $(this).data('color'));
}
}
});
}).scroll();
});
External CSS
This Pen doesn't use any external CSS resources.