Setting Banner on Scroll
Here the banner on a mobile page updates when the visitor scrolls the page.
This is achieved by adding an id to the w3-bar-item classed element, "myheader".
I have already added the code to take the visitor to the Home Page when the top bar is clicked. Again,
this is in Mobile Display mode. This ia also coupled with setting the style text-decoration:none.
(I have already added the click for Home Page to the template but I had not added the style attribute)
The limitation here is that it adds a complication to the template in that the header texts need to be changed in the script triggered by the scroll event window.onscroll
Another limitation could be that the scrolled text is too long for the mobile display width.
The Code
This was developed originally on my Parish Council pages and is documented here.
The code to change banner text
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 50) {
document.getElementById("myheader").innerHTML = "Setting banner on Scroll - Scrolled page";
} else {
document.getElementById("myheader").innerHTML = "Setting banner on Scroll";
}
}
</script>
Note: This will only be seen on a mobile device.
Going to Home Page on clicking banner
This page has that functionality but it is not something that I have put on the template. It is only really of use when the top banner is the name of the website such as the Parish Council.
The "go to top" functionality is possible also too much for the visitor who is likely to find such pages and would only make sense to me.