Header logo that changes
How do I make an header logo that changes?
Answer to http://stackoverflow.com/questions/21351108/detect-when-multiple-elements-are-at-top-of-browser-screen. What is a header logo that changes? How do you make a header logo that changes? This script and codes were developed by Coran Spicer on 15 October 2022, Saturday.
Header logo that changes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Header logo that changes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo dark"></div>
<div class="logo light"></div>
<div class="fullwidth light"></div>
<div class="fullwidth dark"></div>
<div class="fullwidth light"></div>
<div class="fullwidth dark"></div>
<div class="fullwidth light"></div>
<div class="fullwidth dark"></div>
<div class="fullwidth light"></div>
<div class="fullwidth dark"></div>
<div class="fullwidth light"></div>
<div class="fullwidth dark"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Header logo that changes - Script Codes CSS Codes
.logo { display: none; position: fixed; top: 0; left: 50%; width: 100px; height: 50px; border-radius: 50%;
}
.logo.dark { background-color: #aaa;
}
.logo.light { background-color: #000;
}
.fullwidth { width: 100%; height: 300px;
}
.fullwidth.dark { background-color: #222;
}
.fullwidth.light { background-color: #ddd;
}
Header logo that changes - Script Codes JS Codes
$('.fullwidth').waypoint(function() { $('.logo').hide(); // reset display of logos if ( $(this).hasClass('light') ) { $('.logo.light').show(); //show the light logo // you could also try fadeIn() for a subtle effect } else if ( $(this).hasClass('dark') ) { $('.logo.dark').show(); //show the dark logo }
});
// sets the visibility for the first one
if ( $('.fullwidth').first().hasClass('light') ) { $('.logo.light').show(); //show the light logo // you could also try fadeIn() for a subtle effect
} else if ( $('.fullwidth').first().hasClass('dark') ) { $('.logo.dark').show(); //show the dark logo
}
Developer | Coran Spicer |
Username | cgspicer |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 2,031 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Drag and Drop Quiz | 3,837 Kb |
SMITE Ward Icon | 3,236 Kb |
ExamplesEdit | 1,592 Kb |
Tile with special tiles experiment | 1,952 Kb |
Promise example | 2,343 Kb |
Album 88 Tuner | 9,852 Kb |
Shattering boxes | 3,390 Kb |
Fully Furnished | 3,613 Kb |
BuildUp | 3,509 Kb |
Donatello Sprite | 2,452 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Calendar | Miroot | 2,033 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Contact | GanNichiHa | 2,514 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Avero - Collectieve LVVP Arbeidsongeschiktheidsverzekering - CSS - som | Frederiquebonink | 12,554 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Toolbar | Onsen | 5,414 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!