Creating a Fixed Header Image

[jon4896]

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?

[DBear]

<style>

.HYPE_scene:not(.HYPE_element) {
	overflow-y: visible !important;
}

#element {
	position: fixed !important;
}
</style>

Make your document responsive (check scale width 100%)

Make sure your elements are pinned to where you want them to be

document with example

fixedHeader.zip (20.6 KB)

[jon4896]

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

[DBear]

You can create a class of fixed

.fixed {
	position: fixed !important;
}

and apply that to any element for it to be fixed.

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

[jon4896]

.fixed {
position: fixed !important;
}

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:

Fixed-Background-Picture.hype.zip (420.8 KB)

[h_classen]

Dear Jonathan,

what about calculating the heights

guess your problems will become less ...

[jon4896]

Dear Jonathan,

what about calculating the heights

guess your problems will become less ...

How would one calculate the heights? Do you mind sending the Hype file?

Sorry, I'm still a novice in the code department

[DBear]

Hi Jonathan @jonlangberg4896

Here is something to help you.

I haven't really tested it but it should help you on your way.

Also as I said previously, the update to Hype should improve the responsive aspect.

D

fixedElements.hype.zip (45.7 KB)

[jon4896]

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.

[h_classen]

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

warmly recommend : 2.)

[jon4896]

Good advice Hans, thank you for all of your help!

[jon4896]

what about calculating the heights

Do you mind sending the latest Hype file that you posted an HTML dropbox link for?

[DBear]

Do you mind sending the latest Hype file that you posted an HTML dropbox link for?

The file I posted above will help with this. It has the same calculations in it.

[jon4896]

The file I posted above will help with this. It has the same calculations in it.

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.

[DBear]

I posted a new one.

Creating a Fixed Image

[h_classen]

it's accidently saved within beta. i can offer it when the new version is published.
have you tested @DBear 's file instead?

[jon4896]

it's accidently saved within beta. i can offer it when the new version is published.have you tested @DBear 's file instead?

Yes, that's the one I tried and it didn't work with the overflow-y like the one you posted did. Any idea when the new version will be published?

[DBear]

@jonlangberg4896

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.

[jon4896]

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.

[DBear]

Hi Jonathan

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!

fixedElementsv2.hype.zip (483.3 KB)