除非页面高度短，否则不能单击证明链接。
除非页面高度短，否则不能单击证明链接。
提问于 2018-10-16 11:21:55
我正在学习引导4。我有一个页面与左肚脐。链接指向同一页面中的段落。左边的导航一直都在观望。
问题是：
当浏览器窗口的高度处于全屏桌面模式时，底部的两个链接不能从左导航栏点击(项目链接:项目3-2和项目4-2)-That是，不能将鼠标放在链接上单击它。所有其他链接都可以正常工作。
当浏览器窗口被手动缩短时，这个问题就消失了，我可以点击所有的链接。
是什么导致了全屏桌面模式的问题？
我想这门课引起了这个问题--但我不确定。
.bd-example {
position: -webkit-sticky; /* is it this? */
position: sticky;
top: .5rem; height: calc(100vh - .5rem);
overflow-y: auto;
padding-top: .5rem;
padding-bottom: .5rem;
font-size: .875rem;
display: inline-block;
}代码作为文档：页面HTML和CSS代码文件
但是，我将代码放在jsFiddle：https://jsfiddle.net/ekareem/aq9Laaew/250605/中，需要使结果页面高到足以观察问题的高度。
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-16 12:44:05
这是因为你想滚动的元素太短了，最后的元素都放在一个屏幕上。
要解决这个问题，您需要允许您的页面实际滚动到它们(将它滚动到的项目放在页面的顶部)。
在下面的示例中，我对容器使用了“可怜人的修复程序”( padding-bottom:100vh )，这样您就可以看到它正常工作了：
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.bd-example {
position: -webkit-sticky;
position: sticky;
top: .5rem; height: calc(100vh - .5rem);
overflow-y: auto;
padding-top: .5rem;
padding-bottom: .5rem;
font-size: .875rem;
display: inline-block; /* could cause a slider when short vitewport */
}
[data-target="#navbar-example3"] {
padding-bottom: 100vh;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
<body data-spy="scroll" data-target=".bd-example">
<div class="container">
<div class="row">
<div class="col-4">
<div class="bd-example">
<nav id="navbar-example3" class="navbar navbar-dark bg-light">
<nav class="nav nav-pills flex-column">
<a class="navbar-brand" href="#" style="color:black;">Test</a>
<a class="nav-link" href="#item-1">Item 1</a>
<ul class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</ul>
<a class="nav-link" href="#item-2">Item2</a>
<a class="nav-link" href="#item-3">Item3</a>
<ul class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</ul>
<a class="nav-link" href="#item-4">Item4</a>
<ul class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-4-1">Item 4-1</a>
<a class="nav-link ml-3 my-1" href="#item-4-2">Item 4-2</a>
</ul>
</nav>
</nav>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#navbar-example3" data-offset="300">
<h4 id="item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore.
Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non
excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam
non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat
elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum
excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore.
Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur
consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim
id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
</p>
<h5 id="item-1-2">Item 2-2</h5>
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure
laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna
occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla
in non consequat eiusmod velit incididunt.
</p>
<h4 id="item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
mollit
voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
Lorem
aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor
laborum
mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum
fugiat ex
est consectetur ipsum commodo tempor sunt in proident.
</p>
<h4 id="item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua
ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit.
Deserunt
tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco
excepteur.
</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore
anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi
enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor
eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex
exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip
laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit
nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in
exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt
reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit
ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
</p>
<h4 id="item-4">Item 4</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore.
Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non
excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam
non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
</p>
<h5 id="item-4-1">Item 4-1</h5>
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat
elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum
excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore.
Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur
consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim
ix duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
</p>
<h5 id="item-4-2">Item 4-2</h5>
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure
laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna
occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non
consequat eiusmod velit incididunt.
</p>
</div>
</div>
</div>
</div>
其他更详细的备选办法包括：
- 在内容之后添加任何元素，这些元素的最小高度为
100vh减去最后一个元素的高度(可能是一个漂亮的、高的、页脚的元素？)--如果您想不出任何其他东西，只需将<div>与(min-height: 100vh; background: url('link-to-nice-picture' no-repeat 50% 50% /cover)放在一起，并以底部为中心的“谢谢”细打印消息。示例：
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.bd-example {
position: -webkit-sticky;
position: sticky;
top: .5rem;
height: calc(100vh - .5rem);
overflow-y: auto;
padding-top: .5rem;
padding-bottom: .5rem;
font-size: .875rem;
display: inline-block;
/* could cause a slider when short vitewport */
}
.bottom-message {
background: url(https://static.boredpanda.com/blog/wp-content/uploads/2014/08/cat-looking-at-you-black-and-white-photography-1.jpg) no-repeat bottom center /cover;
min-height: 100vh;
display: flex;
align-items: flex-end;
justify-content: center;
}
.bottom-message em{
font-family: initial;
font-size: 1.5rem;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target=".bd-example">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-4">
<div class="bd-example">
<nav id="navbar-example3" class="navbar navbar-dark bg-light">
<nav class="nav nav-pills flex-column">
<a class="navbar-brand" href="#" style="color:black;">Test</a>
<a class="nav-link" href="#item-1">Item 1</a>
<ul class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</ul>
<a class="nav-link" href="#item-2">Item2</a>
<a class="nav-link" href="#item-3">Item3</a>
<ul class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</ul>
<a class="nav-link" href="#item-4">Item4</a>
<ul class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-4-1">Item 4-1</a>
<a class="nav-link ml-3 my-1" href="#item-4-2">Item 4-2</a>
</ul>
</nav>
</nav>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#navbar-example3" data-offset="300">
<h4 id="item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
</p>
<h5 id="item-1-2">Item 2-2</h5>
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
</p>
<h4 id="item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat
ex est consectetur ipsum commodo tempor sunt in proident.
</p>
<h4 id="item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat
mollit culpa irure ullamco est ex ullamco excepteur.
</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut.
Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum
consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi
in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
</p>
<h4 id="item-4">Item 4</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
</p>
<h5 id="item-4-1">Item 4-1</h5>
<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim ix duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
</p>
<h5 id="item-4-2">Item 4-2</h5>
<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
</p>
</div>
</div>
</div>
</div>
<div class="bottom-message"><em>Say cheese...</em></div>
</body>
- 将滚动间谍元素的数量减少到一个有用的编号(记住滚动间谍的功能是允许用户快速滚动大量的内容，--所以可能只是将其添加到各个部分，而不是子部分！？)
https://jsfiddle.net/websiter/uodnhqyp/
- 使每个滚动间谍部分有一个minumum
100vh高度，丰富您的应用程序图形，这是引人注目的，现代设计的骨干。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52834326
复制相关文章
相似问题
腾讯云开发者
