jquery - 使用顶部固定导航时隐藏文本

Question

我正在使用固定顶部导航，然后我的 div 文本隐藏在顶部导航后面，如何修复它？

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <style>
  *{margin:0px; padding:0px;}
  .myNav{ width:100%; background:#ccc; position:fixed; top:0px;}
  .myNav li{ list-style:none; float:left;}
  h1{ margin:0px;}
  
  #home{ height:1000px; width:100%; background:gray; padding:10px;}
  #about{ height:1000px; width:100%; background:green; padding:10px;}
  #service{ height:1000px; width:100%; background:teal; padding:10px;}
  #contact{ height:1000px; width:100%; background:red; padding:10px;}
 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  <ul class="myNav nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

<div id="home">
<h1>Home</h1>
</div>

<div id="about">
<h1>About</h1>
</div>

<div id="service">
<h1>Service</h1>
</div>

<div id="contact">
<h1>Contact</h1>
</div>

实际上，我必须使用书签和固定顶部导航，但它不能正常工作，任何人都可以做到吗？

我知道这是因为导航的position:fixed。

谢谢!

Answer 1

对于纯 css，使用 jQuery 添加 div h1 { margin-top:40px} 及以下内容

$('.myNav a').on('click', function(e) {
  e.preventDefault();
  var cid = '#' + this.href.split('#')[1];
  $('html, body').animate({
        scrollTop: $(cid).offset().top - 40
    }, 500);
})

#home {margin-top:40px}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  
  .myNav {
    width: 100%;
    background: #ccc;
    position: fixed;
    top: 0px;
  }
  
  .myNav li {
    list-style: none;
    float: left;
  }
  
  h1 {
    margin: 0px;
  }
  
  #home {
    height: 1000px;
    width: 100%;
    background: gray;
    padding: 10px;
  }
  
  #about {
    height: 1000px;
    width: 100%;
    background: green;
    padding: 10px;
  }
  
  #service {
    height: 1000px;
    width: 100%;
    background: teal;
    padding: 10px;
  }
  
  #contact {
    height: 1000px;
    width: 100%;
    background: red;
    padding: 10px;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="myNav nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#service">Service</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div class="wrapper">
  <div id="home">
    <h1>Home</h1>
  </div>

  <div id="about">
    <h1>About</h1>
  </div>

  <div id="service">
    <h1>Service</h1>
  </div>

  <div id="contact">
    <h1>Contact</h1>
  </div>
</div>