JavaScript - 固定的侧边栏（附效果动图）

效果

 

侧边栏始终和上面隔着固定距离 

核心代码

<script>
        //获取元素
        var side = document.querySelector('.side');
        var banner = document.querySelector('.banner');
        var goBack = document.querySelector('.goBack');
        var main = document.querySelector('.main');

        //下面的各种距离要写在外边，是获取页面加载完后，初始的banner离最上面的距离，sideTop：side离banner顶部的距离；mainTop：main距离最上面的距离
        var bannerTop = banner.offsetTop;
        var sideTop = side.offsetTop - bannerTop;
        var mainTop = main.offsetTop;

        //添加事件
        document.addEventListener('scroll', function () {  //当网页被滑动时
            if (window.pageYOffset >= bannerTop) {  //如果滑动的垂直距离 大于等于 banner离