Jump to content

Help to stop scrolling/referencing under sticky header

Recommended Posts

Hello all,


I am relatively new to HTML and am having a problem that I don't know the best way to solve. Please can anyone help.


I am creating an HTML5 web page with a sticky header that contains copyright information that needs to always remain visible at the top of the page. I successfully created the header using the fixed position attribute. The header is a constant size, the full screen width, and remains visible throughout.


When the page is scrolled the text scrolls up under the header. That, in itself, is not a problem.


What is a problem, however, is when there is a link using the <a href="yyyyy.html#xxxxx"> tag. The display jumps to the link, but the link text is now displayed at the very top of the screen, under, and consequently hidden by, the fixed header. Is there a way to either:


1) Make the bulk of the web page only use the space below the header, or

2) Make the jump to the link display not at the top of the screen, but lower by the height of the header.


My only other consideration is that I would like to do this in a manner that has the most backward compatibility. The web pages I am creating might need to be displayed world wide on older systems. So, even though I am currently testing HTML5 I am actually trying not to take advantage of new HTML5 features.


Many thanks in anticipation,






Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...