Changing css on scroll

Question

I know this has been discussed before, but I can't seem to get it work for me, I would appreciate some help.

I'm trying to change the opacity of a logo after scrolling some pixels with this code:

<script>
        $(window).scroll(function() {
            if ( $(window).scrollTop() >= 675 ) {
                $('.logo_full').css('opacity', '1');
            } else {
                $('.logo_full').css('opacity', '0'); 
            }
        });
</script>

Here is a live version of the things. I believe it's better to check it out live rather than on some pieces of code. link

I'm starting to think that this is some js incompability or some stuff.

Any ideas?

There is no logo to change opacity on? this is why fiddle is better than full site... — StudioTime
– StudioTime, Commented Apr 17, 2015 at 22:22

JBzd · Accepted Answer · 2015-04-17 22:34:00Z

2

Try:

$(document).ready(function() {
    $('#wrapper').scroll(function() {
        if ( $('#wrapper').scrollTop() >= 675 ) {
            $('.logo_full').css('opacity', '1');
        } else {
            $('.logo_full').css('opacity', '0'); 
        }
    });
});

$(window).scrollTop() is constantly returning 0, while as you scroll, $('#wrapper').scrollTop() will indeed return the result you are expecting. You may need to wrap it in a $(document).ready to make sure you are binding at the right time.

edited Apr 17, 2015 at 22:34

answered Apr 17, 2015 at 22:22

JBzd

7153 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

White8Tiger Over a year ago

I did as you said and the logo is still not turning to opacity 1. I've already upload it, could you check it out?

JBzd Over a year ago

You have $(window).scroll, try $('#wrapper').scroll

JBzd Over a year ago

Glad it worked for you. If you wanted to get fancy, you can leverage jQuery's fadeIn and fadeOut as well. api.jquery.com/category/effects/fading

White8Tiger Over a year ago

I believe a transition on the css would be much more simple. my opinion tho.

Collectives™ on Stack Overflow

Changing css on scroll

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related