The onscroll event

The goal here is to have a banner that tells the visitor that they have accessed a page on the Belchamp Walter Parish Council website. When the page is scrolled and the header of the page scrolls out of view the banner changes to the subject of the page.

The code is adapted from earlier work based on an example on the W3C website.

Again, this code only applies to the mobile phone rendering.

My page on Mobile Navigation shows the technique of changing the hyperlink on the bannet programatically. In this instance I can change not only the text but the destination and the title of the link.

The title attribute in the mobile phone rendering is academic as the screen will be a touch screen and there is no pointer. I have added it to test on the computer.

In this case I don't need to change the destination or the title as the banner is intended to return to the home page.

I need to try this on a few pages. However, it may not be needed on all so I am not necessarily adding it to the template.

I have added the code to the "technical" page. There is a potential of over complicating the operation of the webpage.

The banner at the top of the "technical page" changes on both the desktop and phone resolutions.