我正在创建一个包含多个粘性部分的网页，并且内容在文档中时，页面工作正常。但是在那种情况下，页面在滚动时会出现抖动，我遇到了文档中内容空白或最少的问题。
我正在分享我的网页代码。
页面出现滚动（加速）问题。 https://codepen.io/syedrafeeq/full/PoPywVe
这是页面演示。（完整内容）
$(window).scroll(function () {
if ($(window).scrollTop() > 40) {
$('.nav-wrapper').addClass("fixed-header");
$(".left-side-menu").addClass("fixed-sidebar");
$(".right-side-menu").addClass("fixed-sidebar");
}
else {
$('.nav-wrapper').removeClass("fixed-header");
$(".left-side-menu").removeClass("fixed-sidebar");
$(".right-side-menu").removeClass("fixed-sidebar");
}
});@import url("https://use.fontawesome.com/releases/v5.0.11/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
body{
font-family: 'Montserrat', sans-serif;
}
h1{
font-size: 1.25rem;
font-weight: bold;
padding: 35px 0;
}
h2{font-size: 1.3rem; font-weight: bold; color: #3d464d;}
ul{list-style: none;}
header{
background: #d4e0ed; /* Old browsers */
background: -moz-linear-gradient(top, #d4e0ed 0%, #b9cee8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d4e0ed 0%,#b9cee8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d4e0ed 0%,#b9cee8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e0ed', endColorstr='#b9cee8',GradientType=0 );
}
header h1{
font-size: 1.25rem;
font-weight: bold;
padding: 20px 0;
margin-bottom: 0;
}
.pro-steps{background: #fff; border-bottom: 1px solid #d5dde6;}
.pro-steps ul{
display: flex;
justify-content: flex-start;
background: #fff;
margin: 0;
padding: 0;
}
.pro-steps .selected{
background: #5082BE;
color: #fff;
position: relative;
}
.pro-steps ul li:hover{color: #5082BE;}
.pro-steps ul li.selected:hover{color: #fff;}
.pro-steps ul li.selected :before{
content: "";
position: absolute;
left: 0;
display: block;
width: 0;
top: 0;
height: 0;
border-top: 27px solid transparent;
border-left: 12px solid #fff;
border-bottom: 27px solid transparent;
}
.pro-steps ul li.selected :after{
content: "";
position: absolute;
right: -12px;
display: block;
width: 0;
top: 0;
height: 0;
border-top: 27px solid transparent;
border-left: 12px solid #5082BE;
border-bottom: 27px solid transparent;
}
.pro-steps ul li:first-child.selected label:before{border-left: 0;}
.pro-steps .selected span{
position: absolute;
right: -12px;
display: block;
width: 0;
top: 0;
height: 0;
border-top: 27px solid transparent;
border-left: 12px solid #5082BE;
border-bottom: 27px solid transparent;
}
.btn-next img{margin-left: 5px;}
.btn-back img{margin-right: 5px;}
.pro-steps ul li{
position: relative;
padding: 16px 23px;
font-size: 13px;
font-weight: bold;
color: #3d464d;
white-space: nowrap;
cursor: pointer;
}
.pro-steps ul li:first-child{padding-left: 0;}
.pro-steps ul li:first-child.selected{padding-left: 10px;}
.pro-steps ul li:before{
content: "";
width: 1px;
height: 14px;
background: #5082BE;
transform: rotate(-25deg);
position: absolute;
right: -4px;
top: 14px;
}
.pro-steps ul li:after{
content: "";
width: 1px;
height: 14px;
background: #5082BE;
transform: rotate(25deg);
position: absolute;
right: -4px;
top: 26px;
}
.pro-steps ul li img { vertical-align: middle; margin-right: 5px; }
.pro-steps ul li label { margin-bottom: 0; cursor: pointer; }
.content-body{
padding-top: 30px;
padding-bottom: 40px;
}
.fixed-sidebar{
position: fixed;
top: 140px;
width: 175px;
}
.default-height {
top: 90px;
}
.static-menu .list-group-item {
padding: 0.5rem 1rem;
}
/*----- Header Nav -----*/
.message-wrap {
color: #ffffff;
font-size: 13px;
height: 30px;
}
.inner-section {
float: left;
line-height: 30px;
}
.header-nav {
background-color: #8d9fb5;
overflow: hidden;
padding: 5px 0;
}
.welcome-message {
display: inline-block;
}
.quote-number {
display: inline-block;
padding-left: 20px;
}
.fixed-header{
background-color:#fff !important;
padding: 0px !important;
margin-bottom: 5px;
position: fixed;
top: 0;
z-index:888;
width: 100%;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15);
}
.inside-header {
background-color: transparent;
border-bottom: 0;
padding: 0.25rem 0.75rem;
}
.inside-header a{
display: inline-block;
width: 80%;
}
.list-group-item {
font-size: 13px;
padding: 0.5rem 1rem;
}
.action-title {
margin-bottom: 0;
}
.main-wrap {
height: 100%;
}
.main-wrapper {
position: relative;
min-height: 100%;
height: auto !important;
/* margin-bottom: -50px; */
}
.main-wrapper {
position: relative;
}
.mid-wrapper {
position: relative;
/* background-color: #fff000; */
}
.mid-content {
padding: 0 0 20px;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
background: #f3f6f8;
padding: 10px 0;
border-top: 1px solid #e1e8ed;
font-size: 13px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main-wrapper" id="mainWrapper">
<header>
<div class="container">
<div class="row header">
<div class="col-lg-12">
<h1>Header Section</h1>
</div>
</div>
</div>
</header>
<div class="nav-wrapper">
<div class="header-nav">
<div class="container">
<div class="message-wrap">
<div class="inner-section">
<div class="welcome-message">Welcome Message</div>
</div>
</div>
</div>
</div>
<div class="pro-steps">
<div class="container">
<ul>
<li>
<label>Home</label>
</li>
<li>
<label>About</label>
</li>
<li>
<label>Services</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
<li>
<label>Products</label>
</li>
</ul>
</div>
</div>
</div>
<div class="light-box" style="display: none;"></div>
<div class="container main-wrap">
<div class="row content-body rateSummary">
<div class="col-lg-2 pr-0">
<div class="left-side-menu">
<div class="list-group mb-4">
<a class="list-group-item text-center"><h6 class="action-title">Left Sidebar</h6></a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 1</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 2</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 3</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 4</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 5</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 6</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 7</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 8</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 9</a>
</div>
</div>
</div>
<div class="col-lg-8">
<div class=" mid-wrapper">
<div class="mid-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum sagittis dolor. Maecenas volutpat, dui a tincidunt lacinia, leo purus posuere lacus, vel consectetur libero ex sed quam. Nulla facilisi. Nam mollis dictum mi in dictum. Sed ut convallis nulla. Proin consectetur arcu leo, eget rhoncus sapien malesuada a. Donec finibus faucibus convallis. Integer varius iaculis diam eget fermentum. Fusce iaculis ipsum quis ligula iaculis, non laoreet lectus tincidunt. Ut pellentesque sit amet quam sed tempor. Donec laoreet justo eleifend lacus placerat efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras tincidunt vitae tortor aliquam tempor. Fusce non dui metus.</p>
<p>Quisque blandit libero nec diam tristique, vel tristique elit egestas. Nulla justo libero, auctor sed volutpat vel, varius ac lorem. Ut vel orci a erat porta condimentum facilisis in lorem. Ut eu eros nisl. Nunc ac posuere enim. Vivamus accumsan urna risus, in accumsan sem tristique vitae. Praesent interdum ante et nibh laoreet lacinia. Pellentesque id lacus ac odio suscipit imperdiet vel egestas nibh. Duis quis quam at diam accumsan interdum. Morbi mollis, leo ut congue blandit, dui arcu scelerisque mi, eu tempus diam metus in odio. Cras lacus eros, aliquet in sagittis a, molestie in erat. Nullam vestibulum placerat risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec gravida interdum urna, nec dignissim metus.</p>
<p>Aenean eu elit nec enim rutrum mollis. Mauris a ipsum sed lacus vehicula consectetur in vel eros. Nulla tempus ligula non efficitur hendrerit. Cras at ex semper, ultricies metus sed, semper est. Maecenas libero neque, semper eu vestibulum a, consectetur eu enim. Quisque at magna et risus pretium finibus. Nunc a egestas eros. Ut ac ligula dui. Sed ultrices ipsum luctus nunc pulvinar, sit amet tristique elit rhoncus. Donec pulvinar nulla id leo interdum rutrum.</p>
<p>Nunc commodo mauris lectus, eu sollicitudin sem tempor sed. Proin scelerisque lacus vitae efficitur dignissim. In quis eleifend lectus. Sed scelerisque est risus, id sagittis justo rhoncus sit amet. Praesent viverra, urna ac posuere euismod, massa metus blandit est, eget porttitor purus lacus id nibh. Donec faucibus tellus ante, eu porttitor ante suscipit vel. Integer vel est non libero dignissim elementum non ac nisi. Praesent tincidunt enim id felis interdum facilisis. Donec fringilla a leo efficitur tempor. Phasellus non ligula nec nisl cursus volutpat ac sed augue.</p>
<p>Cras facilisis felis eros, eget dignissim leo ultrices molestie. Aenean et lorem nisl. Nulla pretium ex enim, eu bibendum neque efficitur luctus. Nunc eget tempus quam. Vestibulum eu hendrerit quam. Maecenas pulvinar felis vitae dolor volutpat, nec interdum ligula commodo. Nullam sed mauris fringilla lacus suscipit molestie. Pellentesque lobortis a dolor non venenatis. Praesent egestas ipsum risus, eget finibus augue viverra in. Etiam quis sem eget nisi eleifend eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-lg-2 pl-0">
<div class="right-side-menu">
<div class="list-group mb-4">
<a class="list-group-item text-center"><h6 class="action-title">Right Sidebar</h6></a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 1</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 2</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 3</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 4</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 5</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 6</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 7</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 8</a>
<a href="#" class="list-group-item list-group-item-action">Demo Link 9</a>
</div>
</div>
</div>
</div>
</div>
<footer class="footer clearfix">
<div class="container"> <strong>Terms & Privacy</strong></div>
</footer>
</div>
具有完整内容演示的页面： https://codepen.io/syedrafeeq/full/ZEbqYqg
答案 0 :(得分：0)
让我的评论成为答案：
有关参考信息，请阅读w3schools: HTML DOM scrollTop Property。
您的Javascript测试if >40 then add classes。到了某个时候，>40在滚动时仍保持true，因此即使您在底部，也要继续添加类，这会导致闪烁。
您需要检查是否已经添加了这些类，以及是否还有要滚动的文档。
顺便说一句：您为什么不toggle()个类？ w3schools: How TO - Toggle Class