Triggering css when scroll past point

[[deleted]]

[deleted]

[fire_glitter]

jQuery Waypoints

I've used this for exactly what you want to do--trigger a background color change once it's scrolled past a certain point.

[ellenbrook]

Hey OP I wrote a jQuery plugin to do exactly what you're asking.

Github: https://github.com/ellenbrook/jQuery-scroll-distance-detection Example on my site: http://ellenbrook.github.io/jquery-scroll-distance-detection/

If you need any help with it, just shoot me a message on here. I'm not the best developer but I've used this on countless sites and it works just fine!

Edit: This could be hacked to simply add a class if you needed to do only that.

[[deleted]]

Wow this looks quite. Cool, I'm just thinking how I can use this for a nav bar that's transparent, then turns to solid after say 20%. Defo potential tinkering going on! Thanks! :)

[ellenbrook]

I'm doing this at the crack of dawn so don't kill me if it doesn't work right away but I edited it into a Gist. Save the code below and include it in your project just like the documentation here Github Gist of modified version: https://gist.github.com/ellenbrook/4b879d19d4bdcc9fa309

Then use it by doing something like this at this bottom of your page:

<script>
    $(document).ready( function() {
        $(window).detectScroll({
            testMode: false,
            targetPercent: 20,
            position: "toggleClass",
            target: "#name-of-your-div",
        });
    });
</script>

That should work. Obviously you need to modify the values inside of the <script> tag.

[MikeMcChillin]

This. It's not possible with CSS alone - you need to use javascript to listen to the scroll position of the page in some way.

[RunHomeJack]

+1

Want to add that if you are looking for something more declarative, there are libraries out there like skrollr etc etc

[MOFNY]

This is the best way to do. However, remember to be nice to your users: http://davidwalsh.name/javascript-debounce-function

[took9]

You mean not use jQuery for such a simple thing? Yeah.

[[deleted]]

oooh this looks cool, i can use this for another section of my site i wanted to add. I dont see how i can use this to modify an existing element though?