Creating a Fixed Header Image

22

Hi Hans,

Now that 3.5 came out, do you mind sending me the file that worked well? Here was the original link you sent to the exported HTML/JS files: https://dl.dropboxusercontent.com/spa/3ftsuc9opmid3j4/Exports/Fixed-Background-Picture/Fixed-Background-Picture.html

23

Fixed-Background-Picture.hype.zip (1.0 MB)

24

Perfect! Works really well! Is there any way to unapply the overflow function when you shrink the browser size and it switches to the mobile view? Check out what happens when you load this site with the browser stretched out to past 768px, then drag the browser to the point where it breaks to the 320px iPhone layout. Somehow, the overflow function that runs on scene load in the 960px view affects the mobile layout even though none of the same element IDs are included in the mobile version. When you shrink it to mobile view and then refresh the page, it looks as it should, so the common denominator is the overflow function.

Fixed Background File.hype.zip (1.5 MB)

25

yes, it wasn’t supposed to work with layouts …

replace:

var thisSceneId = $(".HYPE_scene[aria-hidden='false']").not(".HYPE_element").attr('id');

positioning();
window.onload = window.onresize = function(){positioning()}

function positioning(){
var wHeight =     window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var cHeight = hypeDocument.getElementProperty(hypeDocument.getElementById('content'), 'height');
var sceneHeight = wHeight + cHeight + 'px';
$("#" + thisSceneId).css({'height': sceneHeight});
$('#' + hypeDocument.documentId()).css({'height': sceneHeight});
}

you’ll need onsceneloadscript for your layout too

positioning();
window.onload = window.onresize = function(){positioning()}

function positioning(){
var thisSceneId = $(".HYPE_scene[aria-hidden='false']").not(".HYPE_element").attr('id');
var sceneHeight = $("#"+ thisSceneId).css('height');
$('#' + hypeDocument.documentId()).css({'height': sceneHeight});
}
26

Great! Thank you so much for all of your help!!

28

I am trying to get a sticky navigation bar which goes back in place working with the last file jon send.
But the bar always jumps right on top, when i start scrolling - what am i doing wrong?

In the header i put:

<style>
	.sticky{
	position: fixed !important;
	}
	</style>

than i run a function on sceneload

lastPos = {
y1 : 0,
y2 : 0
}

el = hypeDocument.getElementById('menu');
sPos = el.getBoundingClientRect().top;

window.onscroll=function(){
wY = window.pageYOffset || (document.body.scrollTop || document.documentElement.scrollTop) ;
lastPos.y1 = lastPos.y2; lastPos.y2 = wY;

if(wY >= sPos){
el.style.left = null;
el.style.margin = 'auto';
el.style.top = '0px';
el.setAttribute("class","sticky");
}
if (lastPos.y2 < lastPos.y1 && wY <= sPos){
el.style.top = sPos + 'px';
el.setAttribute("class","");
}

};
29

Thanks for making such a versatile and robust HTML5 editor! I always appreciate the support I get from the e-mail I send in from time to time.

May I suggest making this a feature so it becomes a built-in capability for Hype 3.6?

Anyways, thanks again!

2 Likes
30

What can I do to make it work with layouts?

31

+1 on that…

(regarding making it a 3.6 feature)

1 Like
32

Great example. but still I do not how to use you example in my project.

In wordpress, it is very easy to build a page with fixed background image, and put text content on that background image by using a page builderl composer.

But it is difficult to do that in Hype, is it possible to make it as build-in fuction?

I even I can not find the element of image, where it come from?

Alex

33

which is a feature request ... :slight_smile: so you may post it as such in a single thread :slight_smile: