css3 滑动到顶部后 固定

CSS3 滑动到顶部后固定，是 CSS3 规范中的一种新特性。通过使用固定定位属性，可以实现一个滚动到顶部后，页面元素不再滚动的效果。

具体实现方法如下：

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}
$(function() {
$(window).scroll(function() {
    if ($(this).scrollTop() >
 200) {
    $('.scroll-to-top').fadeIn();
}
 else {
    $('.scroll-to-top').fadeOut();
}
}
    );
$('.scroll-to-top').click(function() {
$('body,html').animate({
scrollTop: 0}
    , 800);
    return false;
}
    );
}
    );
    

代码中，我们首先定义了一个样式，用于将元素定位到页面底部。具体的样式可以根据需要进行修改。注意到，我们将元素的display属性设置为none，这是为了在页面载入时，隐藏这个元素。

接下来，我们使用$(window).scroll()监听页面的滚动事件。如果页面滚动了超过200个像素高度时，我们将元素显示出来。

最后，我们还为这个元素添加了一个点击事件。当用户点击元素时，我们使用$('body,html').animate()方法，将页面滚动至顶部，动画时间为 800 毫秒。

通过以上代码，就可以实现一个滚动到顶部时，元素固定在屏幕底部的效果。可见，CSS3 提供了非常方便的方式实现页面效果和交互，我们需要不断更新与学习这些新特性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！