How to change logo depending on scroll?
Question
What I'm trying to accomplish is to change the logo in fixed nav when it is on another element like when I have black background to change the logo to white one and in other way.
Here is jQuery:
$(document).ready(function () {
var scroll_start = 0;
var startchange = $('.scroll');
var offset = startchange.offset();
$(document).scroll(function () {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$('.logo').removeClass('logo-not-active');
$('.logo').addClass('logo-active');
} else if (scroll_start < offset.top) {
$('.logo').removeClass('logo-active');
$('.logo').addClass('logo-not-active');
} else {
$('.logo').removeClass('logo-active');
$('.logo').addClass('logo-not-active');
}
});
});
2 answers
solution1
0 2021-05-08 23:32:33
At the end I did found a way to solve my problem but the code may not be clean or best but it does what I needed. Just for someone in future strugling to do something like this.
I just made another function.
$(document).scroll(function () {
var mainHero = $('#hero').offset().top;
stop = Math.round($(document).scrollTop());
if (stop > mainHero) {
$('.logo').removeClass('logo-not-active');
$('.logo').addClass('logo-active');
} else {
$('.logo').removeClass('logo-active');
$('.logo').addClass('logo-not-active');
}
});
$(document).scroll(function () {
var mainServ = $('#services').offset().top;
stop = Math.round($(document).scrollTop());
if (stop > mainServ) {
$('.logo').removeClass('logo-active');
$('.logo').addClass('logo-not-active');
} else {
$('.logo').addClass('logo-active');
}
});
solution2
0 2021-05-09 04:09:43
You can use Element.scrollTop property on root element to get the number of pixels that an element's content is scrolled vertically.
const element = document.documentElement; const logo = document.querySelector('#logo'); $(document).scroll(function (e) { if (element.scrollTop < 300) { logo.classList.remove('other'); logo.classList.add('black'); } else if (element.scrollTop >= 300 && element.scrollTop < 600) { logo.classList.remove('black'); logo.classList.add('other'); } else { logo.classList.remove('other'); logo.classList.add('white'); } });
div { height: 300px; }.p1 { background-color: #f2f2f2; }.p2 { background-color: #0033cc; color: #e066ff; }.p3 { background-color: #303030; color: #FFFFFF; }.inner-div { margin-top: 80px; position: absolute; } #logo { position: fixed; top: 0; }.white { color: #FFFFFF; }.black { color: #000000; }.other { color: #e066ff; }
<.DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1 id="logo" class="black">My LOGO</h1> <div class="p1"> <div class="inner-div">This is a div element.....</div> </div> <div class="p2">This is a div element.....</div> <div class="p3">This is a div element......</div> <div class="p3">This is a div element.....:</div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
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.