Replace image (logo in the top left corner of the page) with a second logo (edited) Scroll page (Scroll)

Question

Good afternoon! I am needing that when scrolling my website page by scroll bar or mouse scroll, the logo be replaced.

My logo is inserted into the page through a class in bootstrap.css Follows:

.logo1{
    background: url(../img/logoo.png) no-repeat;
    height: 164px;
    width: 172px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    float: left;
    position: absolute;

}

.logo2{
    background: url(../img/logoclube.png) no-repeat;
    height: 78px;
    width: 61px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    float: left;
    position: absolute;

}

What I need is that when scrolling the page, the class called . logo1 is replaced by the class . logo2 and consequently the original image of the home page is replaced.

Answer 1

You can explore other ways, but using jQuery functions .scroll(), .removeClass() and .addClass(), can solve the problem:

<script>
$(document).ready(function(){
    $(window).scroll(function() {
       $('.logo1').removeClass('logo1').addClass('logo2');  
    });
});
</script>

In your html add the jQuery script before any javascript code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>