注意:向下滚动时请尝试使用鼠标滚轮。另外请善待鼠标滚轮。慢慢移动。
我有一个关于滚动的小问题。当页面向下滚动时,我试图减小标题高度,就像大多数创意网站所做的那样。 但在这种情况下,当我尝试用鼠标向下滚动时,屏幕会晃动。有时也需要使用鼠标滚轮滚动。所有文件都添加到 js fiddle 中。请看下面的jsfiddle。我希望我能表达自己。提前致谢。
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= 30) {
$('.header-bottom').addClass('sticky');
$('.header-bottom').css('line-height','80px');
} else {
$('.header-bottom').removeClass('sticky');
$('.header-bottom').css('line-height','160px');
}
});
});
body {
margin: 0;
}
.header-top {
line-height:30px;
background: blue;
}
.header-bottom {
line-height:160px;
background: red;
-webkit-transition: .45s;
-moz-transition: .45s;
-ms-transition: .45s;
-o-transition: .45s;
transition: .45s;
}
.sticky {
position: sticky;
top:0;
width: 100%;
}
.content {
margin-top: 20px;
}
.content > div {
margin-bottom: 100px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="header-top">Content</div>
<div class="header-bottom">Content</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, suscipit consequuntur! Neque modi libero praesentium rerum, pariatur, assumenda obcaecati laudantium officia iste excepturi, molestias quibusdam quae sed nihil laborum.</div>
<div>Necessitatibus, omnis odit ipsam, repudiandae beatae minima! Voluptates molestias vitae fuga officiis, aperiam earum quas laboriosam cupiditate hic vero reiciendis, numquam corporis, assumenda rem iure expedita animi magnam perferendis delectus.</div>
<div>Eum odit hic delectus vel facilis nisi cupiditate ad enim recusandae ex, commodi sunt ullam distinctio, architecto quam nulla cumque possimus nihil qui unde magni provident ratione obcaecati fuga. Beatae.</div>
<div>Iusto repellendus dolore atque architecto consequatur magni nulla animi possimus reiciendis, soluta similique recusandae voluptate reprehenderit, aspernatur repellat ab provident facere magnam sit unde, accusantium explicabo. Ducimus odit aliquid, minima!</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
</div>
最佳答案
您添加<div class="header">
。之后header-top
和header-bottom
入住<div class="header">
并添加CSS;
.header { height:190px;}
如果您使用position:fixed
安装position:sticky
这可能有用。
问题将会解决。
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 30) {
$('.header-bottom').addClass('sticky');
} else {
$('.header-bottom').removeClass('sticky');
}
});
});
body {
margin: 0;
}
.header {
height:190px;
}
.header-top {
line-height:30px;
background: blue;
}
.header-bottom {
line-height:160px;
background: red;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.sticky {
position: fixed;
line-height:80px;
top:0;
width: 100%;
}
.content {
margin-top: 20px;
}
.content > div {
margin-bottom: 100px;
}
.margin {
margin-top:190px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="header">
<div class="header-top">Content</div>
<div class="header-bottom">Content</div>
</div>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis, suscipit consequuntur! Neque modi libero praesentium rerum, pariatur, assumenda obcaecati laudantium officia iste excepturi, molestias quibusdam quae sed nihil laborum.</div>
<div>Necessitatibus, omnis odit ipsam, repudiandae beatae minima! Voluptates molestias vitae fuga officiis, aperiam earum quas laboriosam cupiditate hic vero reiciendis, numquam corporis, assumenda rem iure expedita animi magnam perferendis delectus.</div>
<div>Eum odit hic delectus vel facilis nisi cupiditate ad enim recusandae ex, commodi sunt ullam distinctio, architecto quam nulla cumque possimus nihil qui unde magni provident ratione obcaecati fuga. Beatae.</div>
<div>Iusto repellendus dolore atque architecto consequatur magni nulla animi possimus reiciendis, soluta similique recusandae voluptate reprehenderit, aspernatur repellat ab provident facere magnam sit unde, accusantium explicabo. Ducimus odit aliquid, minima!</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
<div>Et cum sapiente placeat quis. Aut nobis ea amet aliquid, voluptatibus laudantium, atque doloremque accusantium nulla iste tempore nemo. Totam non eos distinctio. Quaerat, dolorem, possimus. Dolores molestiae nam natus.</div>
</div>
关于javascript - 向下滚动时标题抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52555277/