"Local WordPress Development" was retired on November 30, 2017. You are now viewing the recommended replacement.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jiten Mehta
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points

on Scroll advise

Hello!

I have a question about using the onscroll event in javascript.

I have an example of what I want to accomplish.

https://www.daher.com/en/home/

You can see a secondary navigation on the bottom left. ( square brackets on the left and list items to the right of the brackets).

The background colour of the brackets change once a certain section is scrolled/landed on.

Is this easy to achieve?

I am just starting to learn Javascript. I am comfortable manipulating DOM elements for the most part. But I need some direction on the process and the way to go about it.

I work for a Marketing company as a Digital Designer. Instead of sending this task to a freelancer, I would rather crack it myself.

Thanks, JIten.

1 Answer

Steven Parker
Steven Parker
243,215 Points
Steven Parker
Steven Parker
243,215 Points

This effect can be done pretty easily by using scroll change events in JavaScript to apply CSS styling to the elements. If you're comfortable using your browser dev tools, you can observe the mechanism working on the sample page.

I can't recall the specific reference offhand, but I remember there are some exercises in some of the courses here to do similar things.