erdmannfreunde/contao-onepage-navigation

[Feature Request] Support for fixed header

Closed this issue · 4 comments

V15 commented

Is it possible to provide an option in the Backend to work with a fixed header?

Therefore you need to provide an input for the height of the header, menu or whatever the fixed header is made of.

It should be possible to provide a number or a CSS class:
The header could be 200px or 10vh or something like this in height or the height of the container with a specific CSS class or ID.

Original Code (j_onepage_navigation.html5):

if (target.length) { event.preventDefault(); $('html, body').stop().animate({ scrollTop: target.offset().top

Code for fixed header with dynamic hight detection:
if (target.length) { event.preventDefault(); $('html, body').stop().animate({ scrollTop: target.offset().top - $('.cssclassname').outerHeight()

Code for fixed header with a specific number (200px) of height:
if (target.length) { event.preventDefault(); $('html, body').stop().animate({ scrollTop: target.offset().top -200

I think the best way in your case is to change the j_onepage_navigation.html5 to your needs, instead of adding an option to the backend.

Or we could add an option offset like here to the template where you can choose your own offset.

V15 commented

This is what I did - I changed the template. But I think it might be useful for other to be able to configure this in the backend.

The option you offered in the template would be helpful as well and for sure easier to implement.

I also would appreciate a solution for the backend as V15 mentioned. A possibility to fill in a fixed height and choose a unit like „px“ or „vh“ or place a css class/id to get to the goal.

This would enhance the extension quite a portion. Especially for the not so code familiar users.

Cheers

@operatorone You can try to use position: sticky as it does exactly what you're looking for. The browser support is good, if you can ignore Internet Explorer. No need to change the extension.