css 随屏滚动 |css div 倒计时

css段落style，css 制作字体图标，网页禁止滚动css，css的基本画法，css中改变图片的长度，免费css模板下载的网站，css div 倒计时 css 随屏滚动 |css div 倒计时

首先，要实现随屏滚动效果，大家需要使用 CSS 中的

position: fixed;

属性。这个属性可以使元素固定在浏览器中某一个位置不动，从而在使用滚动条的时候达到随屏滚动的效果。

.header {
width: 100%;
position: fixed;
top: 0;
z-index: 999;
background-color: #FFF;
padding: 20px;
}

上面的代码是一个典型的头部代码，可以让你的网站在滚动的时候固定在屏幕顶端。下面大家来看一下如何实现一个随着屏幕滚动而滑入的元素：

.slideIn {
width: 500px;
height: 200px;
position: fixed;
top: -200px;
left: 50%;
margin-left: -250px;
transition: top 0.5s ease-out;
}
.slideIn.active {
top: 0;
}

在上面的代码中，当页面加载的时候大家会让元素变为

position: fixed;

，并且将它的 top 值设置为目标位置的负值（这里设置为了 -200px），然后在大家需要让它出现的时候通过添加 active 类使其 top 值恢复为 0，这样就能够让元素随着屏幕滚动而滑入了。

以上是实现 CSS 随屏滚动的基本方法，它可以用在很多地方，比如固定导航栏、悬浮广告等等，但要注意的是，在使用随屏滚动效果的时候一定要注意使用者体验，不要影响用户浏览网页的体验。