Change Body Border color on Scroll

[vnvillar]

Heya Guys!

I’ll be working on a website project soon and I want to use https://css-tricks.com/examples/BodyBorder/ but I also want the border color to change when the user scrolls. Something similar to this one but only for the body border http://jsfiddle.net/cgspicer/V4qh9/

Hope you can help me? I’m not good with jQuery btw.

Thanks in advance guys! :)

Best,

Val

[Atelierbram]

Can you tell or show ( maybe in a Codepen ) what you have tried so far?

[Paulie_D]

Jquery can do the background change simply with a short function.

I admit that it only works for one value at the moment but my JQ skills are poor so adding another scroll change is beyond me at the moment.

Codepen: http://codepen.io/Paulie-D/pen/rjJcB

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $("body").addClass("blue");
    } else {
        $("body").removeClass("blue");
    }
});

[vnvillar]

Hello Paulie_D!

Thank for your input! Really appreciate it. What you got is similar to this one http://jsfiddle.net/cgspicer/V4qh9/ but I actually wanted the body border color to change and not the actual page background. Using the Technique 1 from this article https://css-tricks.com/body-border/ I wanted to change the color of the 4 divs when the user scrolls. Hope I make sense hehe

Really appreciate your help. I’m sure there’s a jQuery God out here that come help us out. :)

[Paulie_D]

Perhaps you could make a Codepen of where you are starting from.

[vnvillar]

Hi Paulie_D!

I have this http://codepen.io/anon/pen/hrdfp to start with. I don’t how to do the body border color change when the user scrolls on jQuery. :)

Thanks!

[Paulie_D]

Ok…figured it out with a little Googling.

I added a common class to each of your border divs so I can select them with Jquery.

Then when the window is scrolled a certain amount another class is added (or removed) that has a different bg color:

As I said, if you want multiple colors at different scroll points then that’s beyond my current skills.

Codepen: http://codepen.io/Paulie-D/pen/Humzw

[vnvillar]

Hi Paulie_D!

Wow that is exactly what I was looking for! But yes I still want to have multiples colors at different scroll points. Hope there’s someone who can help us. Let’s see :)

Thank you so much for your help. Really appreciate it! :)

Val

[Chromawoods]

As a small performance improvement, might I suggest saving references to $(".corner") and $(window) outside of the scroll function? Otherwise I believe jQuery will perform that selection every time the scroll event fires, which is very unnecessary. So above the scroll function, have something like

var $corner = $(".corner"), $window = $(window);

..and then reference those inside the function.

[Paulie_D]

@Chromawoods

Could you demonstrate? My JQ is weak.

Plus…any thoughts on multiple scroll points?

[Chromawoods]

Sure. Here’s a fork: http://codepen.io/chromawoods/pen/Iulgb

So, basically the jQuery selection is already done and has a reference every time the event fires, which can be quite frequently. We do the heavy lifting before bombarding the browser with onscroll-events.

[vnvillar]

Hi Chromawoods!

Do you have ideas/thoughts on multiple colors on different scroll points?

Thanks for your help. Really appreciate it. :)

Best,
Val

[galitskyd]

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: http://codepen.io/galitskyd/pen/yocDa

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.

[Paulie_D]

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.

Hmmm…I suspected as much.

Is it possible to get the body height as a an initial variable(?) and then use percentage values instead of fixed pixels.

Eg..After I have scrolled 25% of the way to the bottom I get another color then after 50% yet another and so on?

[galitskyd]

Is it possible to get the body height as a an initial variable(?) and then use percentage values instead of fixed pixels.

$('body').height(); Would get the height of the body. This would work if you know there isn’t going to be any DOM changes (ie display none, height/width changes, font size changes, ect) when you are trying calculate the height value and % otherwise will throw things off. Again, if you don’t do any of that then it is a valid solution.

[Author]

Posts