The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Change Body Border color on Scroll Reply To: Change Body Border color on Scroll


There are two ways that you could go about multiple scroll points, off the top of my head. You could keep going on the trend you are now with doing scrollTop < y-pixels ect.

Like so:

The problem with this system is that it is fragile. Depending on the user’s browser window size and/or resolution of their monitor scrollTop() will have varying results used this way. This even breaks adjusting the height of the view on codepen.

I would suggest looking into calculating the position of html element’s id/class (in this pen’s case a p tag id/class) in relation to where the top of window is. When that html element is at the top or above the window, will be represented as a -y value or 0, change the color accordingly. Unfortunately, I am unable to make a codepen tonight as I need to sleep before work.

Again, the first option works if that is all you need. The second way is a little more complicated but would be far more reliable. This idea was just to get some gears turning in your heads :). I can see what I can do after work tomorrow, if desired.