滾動到帶有粘性導航和側邊欄的部分
[英]Scroll to section with sticky nav and sidebar
問題描述
我一直在嘗試使用粘性側邊欄和頂部欄滾動到文章 ID。 我嘗試了以下方法：
$(document).ready(function() { var length = $('aside').height() - $('.sidebar ul').height() + $('aside').offset().top - $('.top').height(); var header = $('.top').height(); $(window).scroll(function() { var scroll = $(this).scrollTop(); var height = $('.sidebar ul').height() + 'px'; if (scroll < $('aside').offset().top) { $('.sidebar ul').css({ position: 'absolute', top: 50 }); } else if (scroll > length) { $('.sidebar ul').css({ position: 'absolute', bottom: '0', top: 'auto' }); } else { $('.sidebar ul').css({ position: 'fixed', top: header, height: height }); } }); $(".sidebar ul li a[href^='#']").on('click', function(e) { e.preventDefault(); var hash = this.hash; $('html, body').animate({ scrollTop: $(hash).offset().top - 80 }, 1000, function() { window.location.hash = hash; }); }); });
html, body { overflow-x: hidden; } a { transition: color 300ms; -webkit-transition: color 300ms; } header { height: 400px; background: forestgreen; }.top { background: #aa0050; height: 80px; text-align: center; line-height: 80px; color: #fff; font-size: 29px; position: fixed; left: 0; right: 0; z-index: 999; } aside { background: #535961; }.sidebar ul { position: absolute; transition: ease.2s; }.sidebar li { margin-bottom: 20px; } main { background: goldenrod; } article { padding: 20px; } footer { height: 400px; background: #006caa; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <body> <header> <div class="top">Navigation</div> </header> <div class="container-fluid content__wrapper"> <div class="row"> <aside class="col-sm-4"> <div class="sidebar"> <h2>Sidebar</h2> <ul class="natural"> <li><a href="#article1">List Item1</a></li> <li><a href="#article2">List Item 2</a></li> <li><a href="#article3">List Item 3</a></li> <li><a href="#article4">List Item 4</a></li> <li><a href="#article5">List Item 5</a></li> <li><a href="#article6">List Item 6</a></li> <li><a href="#article7">List Item 7</a></li> <li><a href="#article8">List Item 8</a></li> <li><a href="#article9">List Item 9</a></li> <li><a href="#article10">List Item 10</a></li> <li><a href="#article11">List Item 11</a></li> <li><a href="#article12">List Item 12</a></li> </ul> </div> </aside> <main class="col-sm-8"> <article id="article1"> <h6>Article 1</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article2"> <h6>Article 2</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article3"> <h6>Article 3</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article4"> <h6>Article 4</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article5"> <h6>Article 5</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article6"> <h6>Article 6</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article7"> <h6>Article 7</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article8"> <h6>Article 8</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article9"> <h6>Article 9</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article10"> <h6>Article 10</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article11"> <h6>Article 11</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> <article id="article12"> <h6>Article 12</h6> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </article> </main> </div> </div> <footer></footer> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>
問題是當我滾動到文章時有一些跳轉並且文章的標題被粘貼條隱藏了。 我不確定我的計算可能在某個地方與偏移頂部和粘性條有誤。
1 個解決方案
解決方案1
1 已采納 2019-10-26 11:18:54
如果將window.location.hash設置為元素的 ID 屬性，瀏覽器將跳轉到該元素。
解決方案1：（設置window.location.hash后，滾動回-80偏移量）
$(".sidebar ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 80
}, 1000,
function() {
window.location.hash = hash;
window.scrollTo(0, $(hash).offset().top - 80);
});
});
另一種解決方案（不要設置 window.location.hash）：
$(".sidebar ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 80
}, 1000);
});
對於其他解決方案，請訪問： 如何在不跳轉文檔的情況下更新 window.location.hash？
Bootstrap滾動時的粘性側邊欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.