-
1 Attachment(s)
Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, scripts?
I don't know if it can be done, but hear me out.
My webpage has a 'sticky' object (title logo/banner thing) at the top of the page. Obviously objects that are non-sticky or are set to 'stick to top' will scroll up and behind this logo.
Is there a way to stop the scrolling before these objects reach the top? A sort of script one could insert into the body of the site?
I've attached a screenshot of approximately where I'd like the scrolling to stop behind the sticky object. Of course I could simply place a sticky rectangle, stretched to full width behind the title image, but that isn't the design I'm going for.
It's not a huge deal, but it'd be cool if it were possible.
The site is currently live (though I'm still making changes to both the main and mobile variant) if you need to view what I'm talking about regarding the scrolling behind the sticky object: mandabee.com
Thanks!
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
The only way I can think of is to limit the depth of your page. Why do you want to stop the scrolling at a certain point?
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Quote:
Originally Posted by
gwpriester
The only way I can think of is to limit the depth of your page. Why do you want to stop the scrolling at a certain point?
I don't really want to "stop" the scrolling, I simply want the scrolling objects to not be visible (fade to top?) after a certain point behind the sticky object.
-
1 Attachment(s)
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Ah. You mean like this? Open this document and preview and scroll the page
-
1 Attachment(s)
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
You'll need to create an image similar to the attached for the sticky. You'd also need to adjust the background image (the one of the bee) to match the colour values of the sticky shape. Hard to recreate without the web/xar file.
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Quote:
Originally Posted by
gwpriester
Ah. You mean like this? Open this document and preview and scroll the page
YES! That's exactly what I want to do. Now, uh... how do I go about doing that? Nurp.
EDIT: Oh wait, nvm. You just placed a white rectangle with transparency at the bottom behind your sticky image.
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Quote:
Check mine out Egg. :)
Oh, yours is far bigger than mine Gary!
Cross posting again. Exactly what I meant too, but the background image may cause issues as I stated in my post ;)
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
MandaBee - You got it. The rectangle needs to be the same color or pattern as the background.
Awesome art on your website, by the way. Xara?
Egg - I figured we cross posted. You have to be quick in this forum. :)
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
I tried copying the background image (which is set to sticky and full width on pasteboard layer), using transparency so that it overlaps precisely over the original, cropping it up to where I want it behind the logo, undoing the transparency, placing it under the sticky logo on the mouse-off layer with the same properties as the background image, but in preview it doesn't match up. I tried moving the logo stuff and the cropped (tried as a copied bitmap image after cropping, also) all to the background layer, but while it matches up in the editor window, it too doesn't match up in preview.
Ah vell. :/
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
You might be asking a bit too much?
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Quote:
Originally Posted by
gwpriester
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.
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
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
-
1 Attachment(s)
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
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.
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Quote:
Originally Posted by
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
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?
-
Re: Scrolling up and behind 'sticky' objects-- but not to top of page. Advice, script
Quote:
Originally Posted by
MandaBee
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
