One thing that I haven’t liked is that the Actions button scrolls out of view as I scroll the page down. The main header stays in view but I don’t really need it that often.
This document client script changes the way the header works and keeps the important actions visible the whole time.
$(document).on('page-change', function(e) {
// Source: https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery
// console.log("Setup observer on header");
var $div = $("div.page-head");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var attributeValue = $(mutation.target).prop(mutation.attributeName);
// console.log("Style attribute changed to:", attributeValue);
if (attributeValue.cssText.includes("navbar-height")){
$( "div.page-head" ).css("z-index","4");
} else {
$( "div.page-head" ).css("z-index","2040");
}
});
});
observer.observe($div[0], {
attributes: true,
attributeFilter: ["style"]
});
});