固定顶部导航栏隐藏其下的内容

Question

I have a fixed-top navbar created with bootstrap library. I have padded the body from top to avoid hiding the content under it. But when i click on a link "about us" for example, the top of that will hide under the navbar. Is there anyway to fix it so that the content of about us is just below the navbar when link is clicked?

 body{ padding: 3em 0; } 

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav class="navbar bg-dark navbar-light fixed-top"> <div class="container-fluid"> <a href="#about-us">About Us</a> </div> </nav> <div class="content"> <div id="about-us"> <h1>About Us</h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> 

Answer 1

Here is one potential solution that also adds the "smooth scroll" feature, while at the same time solving your problem.

The secret here is to use jQuery .animate() method, along with an offset, to slide the page to the desired section (less the offset value) . So, you need:

1. A class name, any class name

2. Add that class name to the menu links (Note that the menu links must be anchor tags, for this particular code example)

3. Use the jQuery code in the below demo that watches for clicks on elements with that className, and then uses jQuery animate to schlep down to the section with the ID that corresponds to the href attribute. The magic that solves your problem is the offset.

Instead of $('a.jtkirk') as your selection/trigger, you might also be able to use $('a[href^=#]') (which says: for all a-tags with an href that begins with the # char ) -- but that does not work with StackOverflow's stack snippets, so I cannot test/demo it. But there is no harm using a class to identify the smooth-scroll links. Again, you can choose any name for the class, I used Capt Kirk's moniker to make it easy to see that.

DEMO:

 $('a.jtkirk').click(function(e){ e.preventDefault(); var kirkoffset = 50; $('html,body').animate({ scrollTop: $(this.hash).offset().top - kirkoffset }, 700); }); 

 body{ padding: 3em 0; } /* Below not necessary - only for demo layout */ nav .scroll{ display:flex; justify-content:flex-start !important; } nav .scroll a {margin-right:15px;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav class="navbar bg-dark navbar-light fixed-top scroll"> <div class="container-fluid scroll"> <a class="jtkirk" href="#about-us">About Us</a> <a class="jtkirk" href="#nuther-one">Nuther One</a> </div> </nav> <div class="content"> <div id="about-us"> <h1>About Us</h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </div> <div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </div> <div id="nuther-one"> <h1>Nuther One</h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </div> </div> 

Answer 2

Use

#about-us {
  padding: 3em 0;
}

instead

body {
  padding: 3em 0;
}

Answer 3

You could use the :target selector with a :before element with the height of your navbar.

 body { padding: 3em 0; } :target::before { display: block; height: 40px; margin-top: -40px; content: ''; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav class="navbar bg-dark navbar-light fixed-top"> <div class="container-fluid"> <a href="#about-us">About Us</a> </div> </nav> <div class="content"> <div id="another"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> <div id="about-us"> <h1>About Us</h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div>