WebSite X5Help Center

 
Adrian B.
Adrian B.
User

Keep Header Always Visible While Scrolling  en

Автор: Adrian B.
Просмотрено 2850, Подписчики 3, Размещенный 0  

Is there a simple way to keep the Header (Template) always visible, so when the user scrolls down a page the header always remains at the top and visible?

Thank you

Adrian

Размещено
13 Ответы
Esahc ..
Esahc ..
Moderator

Sticky Bar, get the header exactly as you want and then copy all objects to the sticky Bar.

Читать больше
Размещено От Esahc ..
Adrian B.
Adrian B.
User
Автор

Yup that works, thank you

Читать больше
Размещено От Adrian B.
Adrian B.
Adrian B.
User
Автор

Well, I thought it was the answer - so as you scroll down, the header starts to roll up out of sight, and then the sticky (duplicate of the header) suddenly drops down and blocks part of the content of the top of the page......

Any other way to "freeze" the header while the page content scrolls?

Adrian

Читать больше
Размещено От Adrian B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT
Adrian B.
... ... Any other way to "freeze" the header while the page content scrolls? ... ... 

(It > En)  ... ... you could use simple EXTRA code ...
... it depends on how the page is structured ...
... you post the link without applying the stickbarr, so that I can evaluate ...
... for example, if the menu were inside the HEADER, this code could be sufficient in / HEAD:
<style> #imHeader {position:fixed;} </style>

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Adrian B.
Adrian B.
User
Автор

Are you asking for the site url? abthermal.com - i have disabled the sticky.

Adrian

Читать больше
Размещено От Adrian B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT
Adrian B.
Are you asking for the site url? abthermal.com - i have disabled the sticky. Adrian

>> Step 1 - Settings > The Advanced section > Statistics, SEO and Code > Options in the Code section | Custom Code: > ▼Before closing the HEAD tag:

......................code..............................

<style> #imHeaderObjects {position: fixed;margin:auto} </style>

....................................................

.

ciao wink

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Adrian B.
Adrian B.
User
Автор

That worked way better thank you. But now the issue appears to be foreground/background of both the header objects and page objects. Will have to play with it and see if I can get it to look good.

Thank you, Adrian

Читать больше
Размещено От Adrian B.
Esse Di
Esse Di
User

That does work for me

<style> #imHeader {position: sticky; top: 0; z-index: 10000;} </style>

Читать больше
Размещено От Esse Di
Adrian B.
Adrian B.
User
Автор

That does work perfect, no further issues that I can see. Thank you very much!

Adrian

Читать больше
Размещено От Adrian B.
Adrian B.
Adrian B.
User
Автор

Detected an issue.... the Internal Page Anchors do not respect the frozen header; top of the anchor area goes to the top of the page behind the header....

Adrian

Читать больше
Размещено От Adrian B.
John S.
John S.
User

This is a well-known problem. You could make a dummy-object just above the wanted anchor. The dummy-object should have the same height as the frozen header, and then the dummy-object should be target for the anchor. This way the wanted object will be exactly beneath the frozen header.

Or you could make the anchors "yourself" as div's and then give them an offset the same as the height of the frozen header.

Читать больше
Размещено От John S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца ESЛучший пользователь месяца PT
Adrian B.
Detected an issue.... the Internal Page Anchors do not respect the frozen header; top of the anchor area goes to the top of the page behind the header.... Adrian

(It > En) ... could be simple with CSS ...
... post the link of the page with the anchors you are interested in, in order to evaluate ...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
John S.
John S.
User

Hello Adrian

I have reloaded an "old" example here : http://eksempelsite.dk/adhoctest/brm09/side-22.html

The example shows the use of offset using the h3. The example/method is very adaptive - if not enough space, then the "anchors" is stacked.

Try click on "Ansgar Kirke", "Blok2" or "Blok3" and you will see the anchor in function. I removed the underlining for the clickable text, as it did not look good.

How it is made can be seen in the downloadable PDF. It is quite simple - once you have used it.

I will let it stay for a while, and then it will be removed. ( the "goto" links will not function as it is not the original files ). It is just made for the example.

Читать больше
Размещено От John S.