css3中怎么让底部随着滚轮

CSS3中有一个非常有用的属性叫做position:fixed，它可以让一个元素固定在某个位置上，不随页面滚动而移动。利用这个属性，我们可以很方便地实现底部导航栏随滚轮移动的效果。

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

上面的代码是实现底部导航栏固定在页面底部的基本样式。接下来我们需要加上一些javascript的代码，实现随滚轮移动的效果。

window.addEventListener("scroll",function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    if(scrollTop + clientHeight >= scrollHeight - 50) {
        document.querySelector(".footer").style.bottom = "50px";
    } else {
        document.querySelector(".footer").style.bottom = "0";
    }
});

上面的代码中，我们监听了页面的滚动事件，然后计算当前页面滚动的距离，可视区域的高度和整个页面的高度。如果当前滚动距离加上可视区域高度大于整个页面高度减去一个固定值（这里是50），就把底部导航栏向上移动50px，否则就恢复到原来的位置。