How to show different logo color when scrolling down in navbar in JS

Question

I have logo(text), phone number and some links in navbar, when I scrolldown I want to change that color of that logo, how can I do it in js.

 <nav class="main-nav transparent stick-fixed js-transparent"> <div class="full-wrapper relative clearfix container"> <!-- Logo ( * your text or image into link tag *)--> <div class="nav-logo-wrap local-scroll"> <a href="<?= base_url('/') ?>"> <p style="font-family: UniversityW01-Roman;color:#fff;margin-top:37px; font-size: 49px;">Logo Here</p> </a> </div> <div class="nav-contact"><a href="tel:+12156464" style="color:#ffffff; font-size: 18px;"><i class="fas fa-phone"></i> Number here</a></div> <!-- Main Menu--> <div class="inner-nav desktop-nav"> <ul class="clearlist"> <li><a href="/" class="active">Home</a></li> <li class="slash">/</li> <li><a href="<?= base_url('about') ?>">About</a></li> <li class="slash">/</li> <li><a href="<?= base_url('fleet') ?>">Fleet</a></li> <li class="slash">/</li> <li><a href="<?= base_url('tours') ?>">Tours</a></li> <li class="slash">/</li> <li><a href="<?= base_url('contact') ?>">Contact</a></li> <li class="slash">/</li> <li><a href="<?= base_url('admin') ?>">Login</a></li> <!-- End Search--> </ul> </div> <!-- End Main Menu--> </div> </nav>

Answer 1

are you searching for this ? https://codepen.io/eighthday/pen/MKqBjX

 function logoSwitch () { $('.altLogo').each(function() { $(this).css('top', $('.startLogo').offset().top - $(this).closest('.row').offset().top ); }); }; $(document).scroll(function() {logoSwitch();}); logoSwitch();

 * { padding: 0; margin: 0; } body { font-family: 'Playfair Display', serif; } .row { min-height: 100vh; overflow: hidden; position: relative; width: 100%; } .logo { top: 100px; left: 100px; transform: rotate(90deg); transform-origin: left top 0; } .startLogo { position: fixed; } .altLogo { position: absolute; } .white { color: white; } .black { color: #1d1d1d; } .grey { background: #ccc; } .blue { background: skyBlue } #scroll { position: fixed; bottom: 40px; right: 100px; text-align: center; font-family: arial }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row grey "> <h1 class="logo black startLogo">Vertical Logo</h1> </div> <div class="row blue"> <h1 class="logo white altLogo">Vertical Logo</h1> </div> <div id="scroll">SCROLL <Br/> &#8595;</div>

Answer 2

You can also try this

 $(document).ready(function(){ $(window).scroll(function(){ var scroll = $(window).scrollTop(); if (scroll > 300) { $(".logo").css("color" , "#fff"); } else{ $(".logo").css("color" , "coral"); } }) })

 body{ margin:0; padding:0; height:1000px; } .black{ position:fixed; top:0; background:#333; width:100%; height:50px; } .black ul{ list-style-type:none; padding:0; } .black ul li{ display:inline-block; width:100px; color:red; } .blue{ position:fixed; top:0; background:blue; width:100%; height:50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="black"> <ul> <li class="logo">Logo</li> <li>link</li> <li>link</li> <li>link</li> <li>link</li> </ul> </div>