1. 首頁
  2. 問答
  3. 如何強制一個網頁的主要部分從一個粘滯的導航欄（僅限CSS）開始？

如何強制一個網頁的主要部分從一個粘滯的導航欄（僅限CSS）開始？

2017-05-12 34 views
2

我想製作的網頁包含一個粘滯導航欄和一些在頁面其餘部分帶有文本的div。我想通過在文本div的標題處添加一個目的地錨，從導航欄鏈接到頁面的另一部分。如何強制一個網頁的主要部分從一個粘滯的導航欄（僅限CSS）開始？

這樣做，我注意到我的網頁的頂部隱藏在導航欄後面。結果是我鏈接的標題也被隱藏了。

HTML：

<nav class="main-nav"> 
    <ul class="main-nav__list"> 
    <li class="main-nav__list-item"> 
     <a href="#one">One</a> 
    </li> 
    <li class="main-nav__list-item"> 
     <a href="#two">Two</a> 
    </li> 
    </ul> 
</nav>

SCSS：

.main-nav { 
    position: fixed; 
    width: 100vw; 
    background-color: $colorGreenBlue; 
    .main-nav__list { 
    margin: 0; 
    padding: 0; 
    } 
}

更多的代碼見http://codepen.io/elinehendrikse/pen/aJVMQo。

我發現了一些選項來處理這個問題：

  1. 添加「填充頂：50px的」上的主要部分。初看起來，這看起來不錯，但是當我鏈接到頁面的另一部分時，這並不能解決問題。

  2. 使用'：before'在我要導航到的div上方添加空格。問題在於它明顯增加了一些空間，這是不可取的。

  3. 將'：target {padding-top：50px}'添加到代碼中。這似乎是一種解決方法，並且在我想解決這個問題的上下文中也是不可能的（Wordpress）。

那麼，我該如何解決，頁面的主要部分總是在導航欄下面開始？這是可能的只有CSS？

感謝:-)

來源

2017-05-12 Eline Hendrikse

回答

2

可以使父Flexbox的column和底部區域設置爲flex-grow: 1; overflow-y: scroll

@import url("https://fonts.googleapis.com/css?family=Armata"); 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
.main-nav { 
 
    background-color: #00c0ad; 
 
} 
 

 
.main-nav .main-nav__list { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.main-nav__list-item { 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: #00c0ad; 
 
    margin-right: -4px; 
 
} 
 

 
.main-nav__list-item a { 
 
    display: block; 
 
    text-decoration: none; 
 
    font-family: "Armata"; 
 
    font-size: 1.5em; 
 
    color: #FFFFFF; 
 
    min-width: 150px; 
 
    padding: 15px 5px 15px 15px; 
 
} 
 

 
.main-nav__list-item a:hover { 
 
    background-color: #FFFFFF; 
 
    color: #00c0ad; 
 
    -webkit-box-shadow: inset 0px 0px 2px 0px #00c0ad; 
 
    -moz-box-shadow: inset 0px 0px 2px 0px #00c0ad; 
 
    box-shadow: inset 0px 0px 2px 0px #00c0ad; 
 
} 
 

 
.main-nav__symbol { 
 
    float: right; 
 
} 
 

 
.dropdown { 
 
    position: absolute; 
 
    display: none; 
 
    padding: 0; 
 
} 
 

 
ul .main-nav__list-item:hover .dropdown-vertical { 
 
    display: block; 
 
} 
 

 
ul li ul .main-nav__list-item:hover .dropdown-horizontal { 
 
    display: block; 
 
    width: 100vw; 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 
.dropdown-horizontal li { 
 
    float: left; 
 
} 
 

 
.dropdown-horizontal li a { 
 
    width: 200px; 
 
} 
 

 
ul li ul li .main-nav__list-item:hover .dropdown-horizontal-vertical { 
 
    display: block; 
 
} 
 

 
main { 
 
    flex-grow: 1; 
 
    overflow-y: scroll; 
 
} 
 

 
.section { 
 
    clear: both; 
 
    width: calc(50vw - 15px*2.5); 
 
    margin: 15px 15px; 
 
} 
 

 
.section .section-header { 
 
    font-family: "Armata"; 
 
    font-size: 1.5em; 
 
} 
 

 
.left { 
 
    float: left; 
 
} 
 

 
.right { 
 
    float: right; 
 
}
<nav class="main-nav"> 
 
    <ul class="main-nav__list"> 
 
    <li class="main-nav__list-item"> 
 
     <a href="#one">One</a> 
 
    </li> 
 
    <li class="main-nav__list-item"> 
 
     <a href="#two">Two</a> 
 
    </li> 
 
    <li class="main-nav__list-item"> 
 
     <a href="#">Three<span class="main-nav__symbol">&#9663;</span></a> 
 
     <ul class="dropdown dropdown-vertical"> 
 
     <li class="main-nav__list-item"> 
 
      <a href="#ten">Ten</a></li> 
 
     <li class="main-nav__list-item"> 
 
      <a href="#">Eleven</a> 
 
     </li> 
 
     <li class="main-nav__list-item"> 
 
      <a href="#">Twelve</a></li> 
 
     <li class="main-nav__list-item"> 
 
      <a href="#">Thirteen<span class="main-nav__symbol">&#9657;</span></a> 
 
      <ul class="dropdown dropdown-horizontal"> 
 
      <li class="main-nav__list-item"> 
 
       <a href="#">Twenty</a> 
 
      </li> 
 
      <li class="main-nav__list-item"> 
 
       <a href="#">Twenty-one<span class="main-nav__symbol">&#9663;</span></a> 
 
       <ul class="dropdown dropdown-horizontal-vertical"> 
 
       <li class="main-nav__list-item"> 
 
        <a href="#">Thirty</a></li> 
 
       <li class="main-nav__list-item"> 
 
        <a href="#">Thirty-one</a> 
 
       </li> 
 
       </ul> 
 
       <!-- dropdown-horizontal-vertical --> 
 
      </li> 
 
      </ul> 
 
      <!-- dropdown-horizontal --> 
 
     </li> 
 
     </ul> 
 
     <!-- dropdown-vertical --> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<main> 
 

 
    <div class="main"> 
 

 
    <div id="one" class="section left section-one"> 
 
     <h1 class="section-header"> 
 
    Section one 
 
    </h1> 
 
     <p class=""> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie 
 
     eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam 
 
     vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo 
 
     nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales. 
 
     Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend, 
 
     non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet 
 
     tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut 
 
     lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent 
 
     nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt. 
 
     Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna. 
 
     </p> 
 
    </div> 
 

 
    <div id="two" class="section right section-two"> 
 
     <h1 class="section-header"> 
 
    Section two 
 
    </h1> 
 
     <p class=""> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie 
 
     eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam 
 
     vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo 
 
     nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales. 
 
     Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend, 
 
     non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet 
 
     tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut 
 
     lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent 
 
     nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt. 
 
     Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna. 
 
     </p> 
 
    </div> 
 

 
    <div id="ten" class="section left section-ten"> 
 
     <h1 class="section-header"> 
 
    Section ten 
 
    </h1> 
 
     <p class=""> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue lorem. Suspendisse ullamcorper nisi lacus, fringilla venenatis turpis varius vitae. Aliquam nibh nunc, cursus sit amet sem non, hendrerit tincidunt nisi. Suspendisse ex est, molestie 
 
     eget diam et, hendrerit semper nulla. Donec ex arcu, ornare nec nulla vitae, tincidunt luctus nibh. Nunc ut purus odio. Curabitur ornare scelerisque hendrerit. Vestibulum varius felis egestas aliquet porttitor. Donec sit amet ornare nisl. Aliquam 
 
     vitae viverra ex. Pellentesque ac nisi sagittis, ultrices nisl nec, volutpat quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ultricies auctor iaculis. Integer finibus ornare eros, nec commodo 
 
     nulla. Donec in turpis vel urna elementum dictum. Maecenas ut feugiat nulla. In hac habitasse platea dictumst. Sed posuere, felis non fringilla tempus, arcu nulla pellentesque nisi, nec varius enim ex vel enim. Sed a dolor sed erat vehicula sodales. 
 
     Vivamus tempus sapien sit amet hendrerit tempor. Praesent diam nulla, molestie id ornare ac, varius in quam. Integer sit amet ultricies lectus. In scelerisque augue libero, at sodales tortor fringilla ut. Aenean pulvinar tortor id libero eleifend, 
 
     non elementum mi pulvinar. Nullam efficitur felis laoreet molestie dignissim. Donec at sapien ac tortor venenatis tempus et eget ex. Sed vehicula elit id tellus suscipit auctor. Donec quis vestibulum est. Etiam vel fermentum lectus. Praesent laoreet 
 
     tortor tortor, luctus condimentum enim auctor quis. Morbi vel tellus ac velit pharetra dignissim. Phasellus vestibulum risus eu lectus rutrum, eget dapibus ex semper. Phasellus nec ultrices libero. Proin fermentum eleifend nisi a vulputate. Ut 
 
     lacinia volutpat purus, at feugiat lectus varius sit amet. Sed eget est vitae ante aliquet euismod. Aenean sit amet nisi nulla. Vestibulum pretium ex id velit vestibulum, quis ornare tortor tempor. Quisque et est vel leo egestas venenatis. Praesent 
 
     nec velit pharetra, auctor orci et, imperdiet ipsum. Duis nec dui id mauris ultricies iaculis id et diam. Etiam vitae dolor eu libero dignissim lacinia. Nulla pulvinar odio at dapibus dignissim. Aenean mattis tellus a nunc tristique tincidunt. 
 
     Donec ornare vehicula odio, vel mattis leo lacinia ac. Quisque auctor ac urna pellentesque placerat. Vestibulum ipsum lectus, tincidunt nec leo in, placerat sagittis magna. 
 
     </p> 
 
    </div> 
 

 
    </div> 
 

 
</main>

來源

2017-05-12 21:22:06

+1

謝謝，這是工作！我沒有考慮彈性選項。 –

+0

@ElineHendrikse歡迎:) –

0

我想只有你已經覆蓋了大部分的CSS你的選擇。如果你是開放的JavaScript（例如jQuery），你可以離開頁面滾動scrollTop動畫，然後減去像偏移像100px像這樣：

$("a[href*='#']:not([href='#'])").click(function() { 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
    if (target.length) { 
     $('html,body').animate({ 
     scrollTop: target.offset().top - 100 
     }, 1000); 
     return false; 
    } 
    } 
});

來源

2017-05-12 21:24:22 StefanBob

+0

Nvm使用其他答案只有CSS解決方案 – StefanBob

相關問題

 相關問題