I am trying to create a fixed image for the header of a website, but I am not finding a CSS hack that has worked within Hype yet. To see what I mean, view the image at the top of this page and scroll down: http://guitarjo.com/
Any ideas on how to target images within Hype to create this effect?
I guess I shouldn’t have said “header”, implying the fixed navigation menu. I meant the wide-frame image that stays fixed in the background at the top of the page. I actually created the Guitar-Jo website in another visual editor called Sparkle. In that program, you can stretch a full page width image and select “fixed in window”, but I don’t know what’s happening on the backend to make that happen. Maybe the same method you provided could apply to an image, but I may want a different fixed image to appear later on in the page. For instance, this page I created in Sparkle has several fixed images in a row: http://nemerchant.com/support-services.html
So you could put an image at the bottom of the layer order and give it the same class.
And then create other elements that will scroll over the top of it.
To change the images similar to your other example I’m thinking some code to change the class (reset) so it’s no longer fixed and scrolls along with the other images until you reach the next image you want fixed and so on
Edit* I have a feeling the update which is on it’s way should make this task a lot easier
That worked when "height: 100%" was unchecked, but didn't when it was checked off. It seems as though I have opened up a whole can of worms as a result of implementing the big header that matches the viewport height. Here's the document trying to attempt the fixed picture while having the 'overflow-y' .js function embedded so you can have content below the large header:
There are a couple problems with that too, so sorry for being such a pain. When stretched to about 1033px in height, the bottom dark gray bar gets cutoff and is no longer accessible. When stretched smaller in height, the background picture is exposed below the footer.
the layout you want to achieve is currently not supported.
so at the end you’ve got to rely on hacks which may work in most circumstances but will / may get lost on any update of hype.
so two possibilities:
1.) get the risk, but also learn (!) how to control it. otherwise you’d always rely on somebodys help
2.) go with built-in capabilities
It may have the same calculations, but it doesn't work with the overflow-y function in the way that I want it to. The way the "Fixed-Background-Picture.hype" file was sent to me, the content was placed within the editor boundaries. When I moved some content below to the overflow area, it disappeared. Hans' file worked with the file I provided. There were just a few minor issues that I can live with, but only the HTML link was provided, not the Hype file.
I have posted 2 files in total fixedHeader.zip and fixedElements.zip
fixedElements.zip is a new file that the overflow-y works as well as a background fixed image and it runs a javascript function that calculates the heights (the same function as is used in the file that h_classen posted)
Please note that these are all hacks and that the new version of Hype should make this kind of use much easier to implement.
I can't get this to work with my file in the same way. Not sure what I am doing wrong, but here is the file before calculating the heights: Commercial-Page.hype.zip (634.7 KB)
If there is one problem that I must fix while still maintaining the overflow-y feature and the sticky header, it is fixing the scrollbar problem that I just found out about. Using the original method as shown in the linked file, when you click the top of the scrollbar when it's flush with the top of the sticky menu, it cannot be selected, it's somehow covering the scrollbar. When you try to grab onto it and drag the scrollbar down in the space where the menu is, the screen shifts to the left, leaving blank white space on the right. You can grab and drag the scrollbar if you click below the menu though.
Here is a merger of your project and my document. I hope it’s ok. Still needs work for your needs but:
• fixed the scroll problem
• menu and background image are fixed position
• overflow is working (a little work needed here for the position of the content)
I have added a few things too
Hope you like. Please don’t break it Only kidding! Break away. Best way to learn!