how to edit css inside javascript


Ask A Question





Login To post a question

I have a logo in my website, when the user opens my website the logo is big, but when he scrolls it becomes small. i did that using javascript like below

window.onscroll = function() {
    growShrinkLogo()
  };

  function growShrinkLogo() {
    var Logo = document.getElementById("logo")
    if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
      Logo.style.width = '80px';
    } else {
      Logo.style.width = '200px';
    }
  }
<div   class="logo">
        <div class="relative-logo">
          <img id="logo" src="assets/images/logo.png" alt="logo">
        </div>
      </div>

the first logo which appears is a littile bit right towards the page and the second is properly in the center, like below images

enter image description here

enter image description here

when i am trying to move the bigger logo it is effecting the small logo because both of it is in the same div. how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo. can anyone help

For more info please click herehttps://stackoverflow.com/q/55790706



Have a question or need a custom quote?
info@smartinfocare.com