Question

我使用top navigation fixed然后我的div文本隐藏在顶部导航后面如何修复它？

＆＃13;

 <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>

＆＃13;

实际上我必须使用bookmark与top navigation fixed一起无法正常工作，任何人都可以这样做吗？

我知道这是因为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>

Answer 2

具有fixed位置的元素将在布局流程之外进行，并且不为自己保留空间。由于nav已从流程中取出，因此第一部分主页向上移动，并且由固定导航覆盖。

一个简单的解决方案是将位置更改为sticky。

粘性定位元件被视为相对定位直到它超过指定的阈值，此时它被处理固定的。

注意：IE不支持position: sticky。

* {
  margin: 0px;
  padding: 0px;
}

.myNav {
  width: 100%;
  background: #ccc;
  position: sticky;
  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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>

Answer 3

您可以使用解决方案https://jsfiddle.net/4hxrjmxk/1/

＆＃13;

*{margin:0px; padding:0px;}
  .myNav{ width:100%; background:#ccc; position:fixed; top:0px;}
  .myNav li{ list-style:none; float:left;}
  h1{ margin:40px 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;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

＆＃13;

刚刚更改了以下代码

h1{ margin:40px 0px;}

Answer 4

 *{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;}
  
  .margin-top-40{
  margin-top:40px;
  }
  h1{padding-top:20px}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <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" class="margin-top-40">
<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>

试试这个。

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

4 个答案: