Are there any new suggestions for my issue? The previous solutions I received didn't quite work, but I'm grateful for the effort.
I am currently working on a project where logo 1 fades out in the header as logo 2 fades in while scrolling down. However, I would like the header to return to its original state with logo 1 fading back in when the user scrolls back to the top of the page. I have limited knowledge of JavaScript and have tried researching various methods to achieve this effect without causing any errors in my current code. Any assistance is greatly appreciated.
<header>
<div id="nav" class="navbar">
<div id="nav_left">
<a href="index.html">HOME</a>
<a href="services.html">SERVICES</a>
<a href="portfolio.html">PORTFOLIO</a>
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
style="display:none" />
<img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
<a href="blog.html">BLOG</a>
<a href="about.html">ABOUT</a>
<a href="contact.html">GET IN TOUCH</a>
</div>
</div>
</header>
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 70) {
$('#logo_Claire_blue').fadeOut(800);
setTimeout(function() {
$('#logo_Claire').fadeIn(800);
}, 800)
};
});
});