I'm creating a reading app and I have a page navigation div with previous and next arrows that will take the user to the previous or next chapter. However, I would like the stores to only display when the chapter text is on the screen but be hidden when showing the header or footer. I'm using JQuery and have found some scripts that show/hide elements based on the scroll position on the page. The issue with these are that the length of the header/footer can differ depending on the viewport. So I would like to only trigger (show) the navigation div when the '.maintext' div has reached the center of the viewport, and hide again when it exits. Any help is much appreciated..