Text in a cover layout to behave like the page title (fixed and above all elements)

[svenro]

Hey,

this question is maybe a bit related with this thread: http://laythemeforum.com:4567/topic/3857/fixed-textbox-in-gridder

This is my website (project): http://sven-rose.com/qatalog

I have got 2 Issues with my layout:

1st:
I want the text box in the top left corner of the cover layout ("Qatalog") to have the same z-index as the page title, so that it is above the rest of the project layout when I scroll down. Currently it hides away with the cover image once the cover is out of the viewport. I have tried to use the same css as you provided for @leandrodisler but I could not archive what I want...

This is the css I tried out:
.fixedtitle {z-index:10000; position:fixed;}

After that I had the idea to fiddle around with frontend.php to make it so, that the page title would render the project title for project pages. But I could not archive that.

Could you give me a hint where to look at, when it's not possible with only css?

2nd: (only tested on a mac/safari so far)
When I scroll down the page fast, the background slides up and reveals the cover page underneath it for a few pixels (like 50-100 or so). Is there a way to prevent that?

I would be really happy to get some directions on these two issues!
Thank you very much,
Sven

[mariusjopen]

Dear @svenro
which box do you mean exactly?

Also we do not recommend to customize PHP code. It will be overwritten after the update.

The you can see the cover below in Safari is a safari issue.
We will look into that though.

Best!

Marius

[svenro]

Hey Marius,

I'm talking about the text on the top left corner that says "Qatalog".

It is part of the cover layout and i would really need it to not hide away once the cover is out of the view-port.

Thank you for the thoughts about the .php issue with theme updates, but I'd rather rework my changes after I update then having this text box to hide underneath the project content once the user scrolls the cover out of the view-port.

Any thoughts how to achieve that?

Best,

[mariusjopen]

Dear @svenro
with jQuery you can hide it when the grey box scrolls to the top of the page:
https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2

Best!

Marius

[svenro]

Dear Marius,

(Question is at the bottom... sorry for the long sorry...)

thanks for the information, I had a look at the article but think that we misunderstood:

I don't want to hide the text-element but make it a fixed element that is on top of every other element, just like the page title and navigation.

I made a workaround using CUSTOM HTML at top of the page and CUSTOM CSS like this:

For every project I made a text:

<a class="pt qat" href="http://sven-rose.com/" data-type="category" data-id="1" data-catid="" data-title="Sven Rose">
	<div class="__Default_head">
	    <span>Qatalog</span>
	</div>
</a>

So i've got like 12 of these rendering on op of each other. For every project page I then hide the unwanted classes with CSS like this:

body.type-project.id-467 .pt.ba,
body.type-project.id-467 .pt.ma,
body.type-project.id-467 .pt.frei,
body.type-project.id-467 .pt.spy,
body.type-project.id-467 .pt.bau,
body.type-project.id-467 .pt.ana,
body.type-project.id-467 .pt.menu,
body.type-project.id-467 .pt.ost,
body.type-project.id-467 .pt.blc,
body.type-project.id-467 .pt.bon,
body.type-project.id-467 .pt.sfk,
body.type-project.id-467 .pt.waba {
    display:none;
}

This works ok for now, BUT: every once in a while, when a user navigates through the page, the texts that should hide blink for a fraction of a second when the page is about to be rendered.

This is why I had another look at frontend.php and I had the following idea:

I would like to change it, that after the part, where laytheme makes the page title, another text is made, that returns the title of the current page, so that this workaround is executed kind of in an automated fashion.

I know about get_the_title() and managed to do what I want, but the problem with this method is: the page title is only rendered after i REFRESH the page once it's loaded.

My question is: How can I get this info from .php using the laytheme? (See attached image)

Thank you!
Best,
Sven

[mariusjopen]

Dear @svenro
why don't you just place a text-element with a link to the next page in the Gridder and give this element a class fixed?

Not sure if the CUSTOM HTML is the most comfortable way to go.
You can also try to place it in the CUSTOM FOOTER.

Best!

Marius