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.

 

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 */
}