Good day! Faced with a little problem. There is an html page with a header on it. Underneath the main content that can scroll vertically. Also has a link of the form

<a href='#some'>Navigate to</a>

When you click on the link, you go to the element with id = some. The problem is that the page header closes the top part (it has position fixed), and it turns out that the some element is overlapped by the header, and to see it, you need to scroll the page up a bit. If for header'a make display = none, then the navigation is correct. Here is the code. Can you please tell me what needs to be done to make navigation work correctly? Thank you in advance!

    2 answers 2

     body{margin: 0;} .fixed{background: red; position: fixed; left: 0; top: 0; right: 0; height: 50px;} .spacer{height: 100px;} .spacer2{height: 600px;} #some{margin-top: -50px; padding-top: 50px;} 
     <div class="fixed"></div> <div class="spacer"></div> <div id="some">some</div> <a href="#some">Link</a> <div class="spacer2"></div>

    Use negative upper margin and equal upper padding on the #some block, which are equal to the высоте фиксированного блока . Thus, playing with the values, you can also make an additional indent from the top when navigating.

      As an option:

      Use an auxiliary block with position: relative; top: -60px; position: relative; top: -60px;

       .navbar { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .main { padding: 16px; margin-top: 30px; height: 1500px; } #anchor { color: red; } 
       <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> <div class="main"> <a href='#anylink'>Navigate to anchor</a> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <div> <div id="anylink" style="position:relative; top:-60px;"></div> <p id="anchor">Some text some text some text some text..</p> </div> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> </div>