How do I make my page header sticky, the one containing the EDIT button
Asked by 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.

![confluence_page_header-Capture.jpg](/t5/image/serverpage/image-id/8022i889C709A7358C1DB/image-size/large?v=v2&px=999 "confluence_page_header-Capture.jpg")


Answers:
author: Tobias Anstett _K15t_
body: Hi [@mlevy5722](/t5/user/viewprofilepage/user-id/1133788),

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

comments: author: Michel_Levy
body: 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>


author: Tobias Anstett _K15t_
body: Hi [@mlevy5722](/t5/user/viewprofilepage/user-id/1133788),

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

Best, Tobias


author: Reinhard Piltz
body: 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 \*/  
}

comments: author: mlevy5722
body: 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.


author: Reinhard Piltz
body: 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.

![ontop.png](https://community.atlassian.com/t5/image/serverpage/image-id/8035i79F43735BCC3D77C/image-size/large?v=v2&px=999 "ontop.png")


author: mlevy5722
body: 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...