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

Question

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

Navigation

#1 by (0 votes)

0

Good afternoon! I need to have the logo replaced when scrolling through the page on my site by the scroll bar or mouse scroll.

My logo is inserted into the page via a class in bootstrap.css Following:

.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 the page rolls, the class named .logo1 is replaced by the .logo2 class and therefore the original image of the home page is replaced.

jquery css rolamento bootstrap

asked by anonymous 16.01.2018 / 17:28

1 answer

Settings environment timezones django postgres linux Find and replace a line of text within a file with thirst

score 0 · Answer 1

You can explore other ways, but using the jQuery functions .scroll() , .removeClass() and .addClass() , you 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>