导航栏滚动上的徽标克隆

Question

I have the following script:

$(function() {
  var header = $(".header-nav");

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      header.addClass("scrolled");
    }
    if (scroll > 50 && scroll < 60) {
      $(".header_logo img").clone().appendTo(".header-logo");
    }
    if (scroll <= 50) {
      header.removeClass("scrolled");
    }
  });

});

It's supposed to make the navbar fixed on scroll and clone the website logo to the navba r on a .header-logo empty div

But it doesn't work as expected. The logo is mass duplicated or don't appear until a top scrolling.

Is there a way to make it work as: When I scroll, the logo is cloned one time on the navbar then disappear if you go back to top page?

Thanks

Answer 1

Clone img outside the condition, then append or remove based on your if condition. You need to set a class to detect cloned img for removing.

 $(function() { var header = $(".header-nav"); $el = $(".header-logo img").clone().addClass('cloned'); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { header.addClass("scrolled"); } else { header.removeClass("scrolled"); } if (scroll > 50) { $el.appendTo(".header-logo"); } else { $('.cloned').remove(); } }); });

 body { height: 1000px; /* fake height! */ } header.header-nav.scrolled { position: fixed; } .header-nav { background: white; width: 100%; min-height: 150px; border: 1px solid gray; } .scrolled { background: red; } .header-logo img { height: 150px; display: block; margin: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header class="header-nav"> <div class="header-logo"> <img src="https://i.graphicmama.com/blog/wp-content/uploads/2019/10/02145410/logo-design-trends-2020-colorful-gradient-logos-example-1.gif" /> </div> </header>