CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Brandon Whitaker
Brandon Whitaker

Reputation: 11

Change color of SVG when scroll past each section

I have an SVG logo which I need to dynamically change colour when it scrolls past a section. Each section is 100% in height and width of the browser window.

It will either be black or white depending on the background colour. I'm happy to set this once I get the gist of this.

Here is my work in progress, I've searched for something but can't find exactly what I need.

http://digitronix-dev.co.uk/dev/digitronix-holding/

Code I've tried - 

var t = $(".dba").offset().top;

    $(document).scroll(function(){
        if($(this).scrollTop() >= t)
        {   
            $('svg.digi-logo polygon').css({"fill":"#000000"});
            $('svg.digi-logo path').css({"fill":"#000000"});
            $('svg.digi-logo rect').css({"fill":"#000000"});
        } else {
            $('svg.digi-logo polygon').css({"fill":"#ffffff"});
            $('svg.digi-logo path').css({"fill":"#ffffff"});
            $('svg.digi-logo rect').css({"fill":"#ffffff"});
        }
    });

However this was only for one section.

Upvotes: 1

Views: 3385

Answers (2)

Alvaro
Alvaro

Reputation: 41605

I would suggest you to use a better scrolling slider such as fullpage.js and to use its jQuery callbacks such as afterLoad or onLeave.

$('#fullpage').fullpage({
   afterLoad: function(anchorLink, index){
        //afterLoading section 3
        if(index == 3){
            $('svg.digi-logo polygon').css({"fill":"#ffffff"});
            $('svg.digi-logo path').css({"fill":"#ffffff"});
            $('svg.digi-logo rect').css({"fill":"#ffffff"});
        }
    }
});

Alternatively, if you prefer to deal just with CSS, you can use the class fullPage.js adds to the body to trigger one or another CSS rule.

An example of this can be seen in this video tutorial.

Upvotes: 1

Drops
Drops

Reputation: 2740

You can easily track scroll positions relative to html elements with waypoints.js.

For example:

$('#foo').waypoint(function(direction) {
  if (direction === 'down' && $('#bar').is(':visible')) {
    $('#bar').velocity({ 
      # velocity.js is simalar to $.animate()
      # but better optimized
      height: 'hide'
    }, 500);
  } else {
    $('#bar').velocity({
      height: $(window).height()
    }, 500);
  }
}, {
  offset: '70px'
});

If you don't need direction its even easier, check docs above for more tips.

What happens is that waypoint.js triggers handler function when top/bottom of viewport 'collides' (well, not really collide but you get the picture) with DOM obj defined in element property. All you need to do is to put your logic into handler method or in if/else body and you're good to go.

Upvotes: 0

Related Questions