CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Brad
Brad

Reputation: 13

On scroll, logo color changes, but scrolling back up it stays the same

Im creating a fixed header where on load, the logo is flat white. On scroll, it changes to the full color logo. However, when scrolling back to the top, it stays the same colored logo instead of going back to white. Here's the code (and a pen)

$(function() {
$(window).scroll(function() {    
    var navlogo = $('.nav-logo-before');
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
        navlogo.removeClass('.nav-logo-before').addClass('nav-logo-after');

    } else  {
        navlogo.removeClass('.nav-logo-after').addClass('nav-logo-before');            
    }

});

});

http://codepen.io/bradpaulp/pen/gmXOjG

Upvotes: 1

Views: 153

Answers (5)

surajck
surajck

Reputation: 1175

Dont need to add the dot . in front of the class name in removeClass and addClass: Use this:

navlogo.removeClass('nav-logo-before')

Secondly, you are removing the class that you are using to get the element in the first place.

I have an updated codepen, see if this suits your needs: http://codepen.io/anon/pen/ZeaYRO

Upvotes: 1

Arkej
Arkej

Reputation: 2251

The problem is that you removes nav-logo-before and then you want to select element with such class but it doesn't exist.

I've rafactored you code to avert it.

Another problem is that you uses dot in removeClass('.before') while it should be removeClass('before') - without dot

$(function() { 

    var navlogo = $('.nav-logo');
    
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
    
        if (scroll >= 1) {
            navlogo.removeClass('before').addClass('after');
            
        } else  {
            navlogo.removeClass('after').addClass('before');
        }
    });
});
body {
	background-color: rgba(0,0,0,.2);
}
.space {
	padding: 300px;
}
.before {
    content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}

.after {
    content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
	<img class="nav-logo before">
</div>
<div class="space">
</div>

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

There's a couple of things here:

1) You start with a .nav-logo-before class but when the logo becomes black you remove that class and then try to get the same element using a class selector that doesn't exist anymore

2) removeClass('.nav-logo-before') is different than removeClass('nev-logo-before), notice the "." in the first selector.

3) You get the element using the $('.selector')in every scroll event, this can be a performance issue, it's better to cache them on page load and then use the element stored in memory

4) It's not a good practice to listen to scroll events as this can be too performance demanding, it's usually better to use the requestAnimationFrame and then check if the scroll position has changed. Using the scroll event it could happen that you scroll up really fast and the scroll event doesn't happen at 0, so your logo won't change. With requestAnimationFrame this can't happen

$(function() {
    var navlogo = $('.nav-logo');
    var $window = $(window);
    var oldScroll = 0;
    function loop() { 
        var scroll = $window.scrollTop();
        if (oldScroll != scroll) {
            oldScroll = scroll;
            if (scroll >= 1) {
                navlogo.removeClass('nav-logo-before').addClass('nav-logo-after');
            } else  {
                navlogo.removeClass('nav-logo-after').addClass('nav-logo-before');      
            }
        }
        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
});
body {
	background-color: rgba(0,0,0,.2);
}
.space {
	padding: 300px;
}
.nav-logo-before {
    content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}

.nav-logo-after {
    content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
	<img class="nav-logo nav-logo-before">
</div>
<div class="space">
</div>

Upvotes: 1

G&#246;khan Mete ERT&#220;RK
G&#246;khan Mete ERT&#220;RK

Reputation: 4986

You are removing the class nav-logo-before, so the second time the function runs, it can't find any element with nav-logo-before.

Just give a second class to your navlogo element and use that on line 3. Like this:

var navlogo = $('.second-class');

working example: http://codepen.io/anon/pen/ryYajx

Upvotes: 0

user7705625
user7705625

Reputation:

You are getting the navlogo variable using

var navlogo = $('.nav-logo-before');

but then you change the class to be 'nav-logo-after', so next time the function gets called you won't be able to select the logo using jquery as it won't have the '.nav-logo-before'class anymore.

You could add an id to the logo and use that to select it, for example.

Apart from that, removeClass('.nav-logo-before') should be removeClass('nav-logo-before') without the dot before the class name.

Upvotes: 0

Related Questions