滚动到带有导航栏和侧边栏的部分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动到带有导航栏和侧边栏的部分相关的知识，希望对你有一定的参考价值。
我一直在尝试滚动到带有粘性侧边栏和顶部栏的文章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>问题是，当我滚动到文章时，会有一些跳转，并且文章标题被粘滞栏隐藏了。我不确定偏移顶和粘性条可能是我的计算错误的地方。
答案
如果将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);
);
有关其他解决方案，请访问：How can I update window.location.hash without jumping the document?
以上是关于滚动到带有导航栏和侧边栏的部分的主要内容，如果未能解决你的问题，请参考以下文章
Angular/Bootstrap - 带有可切换侧边栏的导航栏