How do I make my page header sticky, the one containing the EDIT button

[mlevy5722]

On any of my Confluence page,

I wish to get some help on how to make the page HEADER that includes the EDIT "button" sticky so I don't have to always have to scroll up to make it appear.

See attached screenshot showing the header section I am talking about in red...

Thank you for any help.

[Tobias Anstett _K15t_]

Hi @mlevy5722,

You can either add a global or a space stylesheet. In my Confluence version the following style / CSS did the job:

#main #main-header {
 top: 41px !important;
 background-color: white !important;
 z-index: 99999 !important;
}

Best, Tobias

[Michel_Levy]

Works Amazing!!!

Thank you so much!

We have another "potentially related" question.

Anyway you can help?, see that question here:

https://community.atlassian.com/t5/Confluence-questions/feature-quot-Edit-without-losing-your-place-quot-NOT-working/qaq-p/986080#M130765

[Tobias Anstett _K15t_]

Hi @mlevy5722,

I am happy it works for you! Feel free to accept the answer ;)

Best, Tobias

[Reinhard Piltz]

I have a little User Macro, its a dynamic scroll button.

Back to top Button:

The body of the user macro:

## Macro title: to the Top Button
##
## Developed by: Reinhard Piltz
## Date created:09.06.2017
## Installed by: Reinhard Piltz
## Beachte CSS Style in der globalen Formatvorlage
## @param copyr:title=Copyright|type=enum|required=false|enumValues=tegut... 2017|default=tegut... 2017

<button onclick="topFunction()" id="ontopBtn" title="back to top">back to top</button>

<script type="text/javascript">
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.getElementById("ontopBtn").style.display = "block";
} else {
document.getElementById("ontopBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0; // For Chrome, Safari and Opera
document.documentElement.scrollTop = 0; // For IE and Firefox
}
</script>

Entry in global Stylesheet

#ontopBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 25px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: darkslateblue; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
}

#ontopBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}

[mlevy5722]

Thank you for this macro.

So how do you actually activate the macro?
And what does it do?

Do you have to activate it all the time of just 1 time ever and then the EDIT-header section will then never disappear?

I am a little confused.

Thank you.

[Reinhard Piltz]

Hi,

this is not am macro to make the page header sticky.

This macro shows a button on each page, which has integrated the macro.

[mlevy5722]

Now I understand, thank you for the clarification.

I am just not sure how to make the button to be the EDIT button.

Also not sure why this header bar is so difficult to have it sticky...