Try this
.d-header .title::after {
padding-left: 20px;
font-size: 1.5em;
color: #333;
content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
display:none;
}
<script>
$(document).ready(function() {
$(window).scroll(function(){
checkScroll()
});
function checkScroll() {
var y = $(window).scrollTop();
if (y > 55) {
document.getElementById("main").classList.add('no-text');
} else {
document.getElementById("main").classList.remove('no-text');
}
}
checkScroll();
});
</script>
Here it is as a component
https://github.com/oerog/header-text.git