Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, scripts?

[gwpriester]

You might be asking a bit too much?

[MandaBee]

You might be asking a bit too much?

Eh, probably. Doesn't hurt to ask, though, right? IT'S HOW WE LEARN, DANGNABBIT! And yeah, the website was done with Xara Web Designer 365 Premium.

[Acorn]

Manda, I like the site but the pages are a bit busy.
Your bee graphic is really effective but at 27MB download, it mars the site's impact.

Turn it into a B&W sketch on each of your pages but include a small, different part of it in full colour.
This would showcase your obvious skills but subtly.

To stop items scrolling beyond a certain point, you need to add a transparent rectangle the height of the your static graphic plus its Y-coord position.
You then group the thin (my preference) rectangle to the top of the object that is going behind.
Finally, set this group to Stick at top.

You can make this transparent box height different heights for different effects.

No code.

Acorn

[siran]

Have also been experimenting a little bit.
My solution can not fade, it just clips. And it looks jerky in preview and IE 9 (and I guess also on mobile devices).
Maybe someone still might find it useful?
I don't even try to create a good looking example.
There is some code at the page head and the green rectangle has the name htmlclass=clipTop applied.
In the code there is a hard coded 20, this defines the offset from the top where the objects with that name are clipped.

[MandaBee]

Manda, I like the site but the pages are a bit busy.
Your bee graphic is really effective but at 27MB download, it mars the site's impact.

Turn it into a B&W sketch on each of your pages but include a small, different part of it in full colour.
This would showcase your obvious skills but subtly.

To stop items scrolling beyond a certain point, you need to add a transparent rectangle the height of the your static graphic plus its Y-coord position.
You then group the thin (my preference) rectangle to the top of the object that is going behind.
Finally, set this group to Stick at top.

You can make this transparent box height different heights for different effects.

No code.

Acorn

I've gone through so many different designs with the website; at one point a greyscale version was my go-to. When I have some downtime at work, I'm gonna optimize a bunch of the larger flat images, including the background, and create a smaller size bee graphic while retaining the transparent background of it.

I'll certainly try your transparent rectangle thing, but I've fiddled with that approach before, and couldn't get it to work in my favor. Will try again! I've also been tinkering with the idea of greyscaling/line-arting the background image on the three main design pages and messing with some other things.

I really appreciate the feedback! Always a work in progress, amirite?

[Acorn]

I've gone through so many different designs with the website; at one point a greyscale version was my go-to. When I have some downtime at work, I'm gonna optimize a bunch of the larger flat images, including the background, and create a smaller size bee graphic while retaining the transparent background of it.
I'll certainly try your transparent rectangle thing, but I've fiddled with that approach before, and couldn't get it to work in my favor. Will try again! I've also been tinkering with the idea of greyscaling/line-arting the background image on the three main design pages and messing with some other things.
I really appreciate the feedback! Always a work in progress, amirite?

Always!
Acorn