CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapevents
user17978613
user17978613

Reputation:

Change logo size on scroll using javascript

I am trying to resize the logo when i scroll down using the following event but its not working :

I am using both classes lrg-logo and sml-logo in my css still nothing is working.


$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

  if (scroll >= 80) {
    if(!logo.hasClass("sml-logo")) {
      logo.hide();
      logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
    }
  } else {
    if(!logo.hasClass("lrg-logo")) {
      logo.hide();
      logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
    }
  }
  });
  });

Basically my nav bar is fixed so it should work and i am using bootstrap 5

HTML :

 <nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="">
        <img class="lrg-logo" src="./images/logo.png" alt="Logo">
      </a>
 </nav>

CSS:

 .lrg-logo{ margin: 50px;
            max-width: 105px;
           }

.sml-logo{ margin: 20px;
           max-width: 60px;
          }

 .navbar { background-color: rgba(97, 95, 95, 0.103);
           transition: 0.4s; 
           overflow: hidden;
           position: fixed;
          }

Upvotes: 0

Views: 425

Answers (1)

Jane Jacek
Jane Jacek

Reputation: 223

I'v seen yours code in jsfiddle with jQuery 3.4.1 . Logo resizeing works good.

here is the link: https://jsfiddle.net/6kn52jbm/


.lrg-logo{
            max-width: 105px;
           }
           
.sml-logo{
           max-width: 60px;
          }

 nav { background-color: rgba(97, 95, 95, 0.103);
           transition: 0.4s; 
           overflow: hidden;
           position:fixed;
           top: 0;
           left: 0;
          }
p{
  margin-top: 150px;
  margin-left: 100px;
}

Upvotes: 2

Related Questions