堆棧內存溢出
  簡體   English   中英

Sticky Bootstrap Navbar 和 Smooth-Scroll - Padding / Margin-Top

[英]Sticky Bootstrap Navbar and Smooth-Scroll - Padding / Margin-Top

 原文  2021-12-15 19:57:48  6   1    javascript/ css/ twitter-bootstrap/ bootstrap-4/ smooth-scrolling

問題描述

我正在嘗試使用平滑滾動行為實現引導粘性導航欄（固定高度為 81 像素）。

HTML 站點具有部分標簽，例如<section class="section" id="news"> ，它可以通過使用<a class="nav-link" href="#news">News</a>跳轉到某些區域導航欄中的<a class="nav-link" href="#news">News</a> 。 我正在使用以下 CSS 和 JS 技術，它們在<body>的開頭加載：

到目前為止它有效：在引導程序特定--breakpoint-lg 992px 處，導航欄折疊成漢堡菜單。 為了補償固定高度的導航欄，我將以下代碼添加到我的custom.css （當然是在bootstrap.min.css 8CBA22E28EB17B5F5C6AE2A266AZ 之后加載），根據在Z5E056C500A5-tricks.07/BADE5ZcsB找到的技巧頁面上的固定標題鏈接和重疊內容哦我的/

@media (max-width: 991px) {
    section {
        padding-top: 382px;
        margin-top: -382px;
    }
}

@media (min-width: 992px) {
    section {
        padding-top: 80px;
        margin-top: -80px;
    }
}

這適用於較大尺寸的瀏覽器 window 寬度，但一旦加載到較小寬度 windows （991px 及以下）上 - 在幾乎所有移動設備上 - 單擊導航欄鏈接跳轉到稍微垂直偏移的點。 任何想法為什么會發生這種情況？ 似乎我對 max-width: 991px 的媒體查詢被忽略了。

1 個解決方案

解決方案1
 0  2021-12-16 11:50:59

感謝您對創建片段的建議。 這顯示了通過使用背景 colors 對部分中的各個 div 的工作技巧。 這樣，第一個元素（一個 h2 標題）位於我們跳轉到的每個區域的頂部。 當不使用背景顏色時，這完全適用於連續文本的查看者和閱讀者，中間有 h2 標題。

我想我找到了一個令人滿意的解決方案。 我對padding-top / margin-top技巧的問題是：我沒有（正確地）在 CSS 中設置<div class="container" id="first">的樣式，而是設置了<section>的樣式。 最終，我也不再需要@media查詢了。 

 $(function() { $(".nav-link").click(function() { let nav = $(".navbar-collapse"); if (nav.hasClass("show")) { nav.removeClass("show"); } }) })
 html { --scroll-behavior: smooth; scroll-behavior: smooth; font-family: 'scroll-behavior: smooth;', sans-serif; }.container { padding-top: 80px; margin-top: -80px; } p { line-height: 2em; }.navbar { background: lightgoldenrodyellow; }.container { display: grid; } #first { background-color: lightcoral; } #second { background-color: lightgreen; } #third { background-color: lightblue; } #fourth { background-color: lightgray; } #fifth { background-color: lightyellow; }
 <:DOCTYPE html> <html lang="zxx"> <head> <title>bootstrap / breakpoint / smooth-scroll issue</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min:css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="stylesheet" href="custom:css"> </head> <body> <.-- JS --> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/jquery.easing@1.4.1/jquery.easing:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/smoothscroll@0.4.0/smoothscroll:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/smoothscroll-anchor-polyfill@1.3.4/dist/index.min,js"></script> <script src="script,js"></script> <.-- Navigation Start --> <nav class="navbar navbar-expand-lg sticky-top"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto navbar-center"> <li class="nav-item active"> <a class="nav-link" href="#first">First</a> </li> <li class="nav-item"> <a class="nav-link" href="#second">Second</a> </li> <li class="nav-item"> <a class="nav-link" href="#third">Third</a> </li> <li class="nav-item"> <a class="nav-link" href="#fourth">Fourth</a> </li> <li class="nav-item"> <a class="nav-link" href="#fifth">Fifth</a> </li> </ul> </div> </nav> <,-- Navigation End --> <.-- Content Start --> <section class="section"> <div class="container" id="first"> <h3>first</h3> <p>Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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> </section> <section class="section"> <div class="container" id="second"> <h3>second</h3> <p>Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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> </section> <section class="section"> <div class="container" id="third"> <h3>third</h3> <p>Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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> </section> <section class="section"> <div class="container" id="fourth"> <h3>fourth</h3> <p>Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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> </section> <section class="section"> <div class="container" id="fifth"> <h3>fifth</h3> <p>Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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. Lorem ipsum dolor sit amet. consectetur adipisicing 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> </section> <!-- Content End --> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用粘性導航欄平滑滾動引導頁面 Bootstrap 4 sticky-top margin-top 帶有粘性頂部 class 的引導模式顯示意外的邊距和填充 JavaScript動畫平滑滾動 使用margin-top滾動視差 如何進行平滑滾動？ 更改滾動頂部的邊距（動畫） 使用 javascript 更改滾動上的邊距頂部 平滑滾動js不滾動 邊緣頂部/填充頂部沒有效果？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM