在线直播源码，JS动态效果之，侧边栏滚动固定效果

结构代码：

<br><div class="slider-bar"><br>        <span class="goBack">返回顶部</span><br>    </div><br>    <div class="header w">头部区域</div><br>    <div class="banner w">banner区域</div><br>    <div class="main w">主体部分</div>

样式代码：

<br>.slider-bar {<br>            position: absolute;<br>            left: 50%;<br>            top: 300px;<br>            margin-left: 600px;<br>            width: 45px;<br>            height: 130px;<br>            <br>        }<br>        <br>        .w {<br>            width: 1200px;<br>            margin: 10px auto;<br>        }<br>        <br>        .header {<br>            height: 150px;<br>            background-color: purple;<br>        }<br>        <br>        .banner {<br>            height: 250px;<br>            background-color: skyblue;<br>        }<br>        <br>        .main {<br>            height: 1000px;<br>            background-color: yellowgreen;<br>        }<br>        <br>        span {<br>            display: none;<br>            position: absolute;<br>            bottom: 0;<br>        }

JS代码：

<br> // 获取元素<br>        var sliderbar = document.querySelector('.slider-bar');    <br>        var banner = document.querySelector('.banner');<br>        var bannerTop = banner.offsetTop; // 获取主体部分距离顶部的距离<br>        var sliderbarTop = sliderbar.offsetTop - bannerTop;  // 看上图我们发现侧边栏是固定banner部分右边的，因此我们要用两个值相减获取banner顶着浏览器页面最上方的时候，侧边栏距离浏览器最上方的值。<br>        document.addEventListener('scroll', function() {      // 给【页面】添加一个滚动事件，我们事件的对象时页面的滚动。<br>            if (window.pageYOffset >= bannerTop) {    //  浏览器滚动上方被遮盖住的部分大于bannerTop，也就是说banenr上方以及没有东西了，再或者说header部分完全被滚动走了。<br>                sliderbar.style.position = 'fixed';<br>                sliderbar.style.top = sliderbarTop + 'px';<br>            } else {<br>                sliderbar.style.position = 'absolute';  // 如果没有滚动走，那就让侧边栏还随着页面的滚动而滚动<br>                sliderbar.style.top = 300 + 'px';    // 元素起初的位置<br>            }<br>            if (window.pageYOffset >= mainTop) {      <br>                goBack.style.display = 'block';     // 如果banner部分被滚动走了，那就让侧边栏内容给显示出来<br>            } else {<br>                goBack.style.display = 'none';        // 否则不显示<br>            }<br>            <br>             // 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方<br>        goBack.addEventListener('click', function() {<br>            // 里面的x和y 不跟单位的 直接写数字即可<br>            // window.scroll(0, 0);<br>            // 因为是窗口滚动 所以对象是window<br>            animate(window, 0);<br>        });<br>        // 动画函数<br>        function animate(obj, target, callback) {<br>            // console.log(callback);  callback = function() {}  调用的时候 callback()<br>            // 先清除以前的定时器，只保留当前的一个定时器执行<br>            clearInterval(obj.timer);<br>            obj.timer = setInterval(function() {<br>                // 步长值写到定时器的里面<br>                // 把我们步长值改为整数 不要出现小数的问题<br>                // var step = Math.ceil((target - obj.offsetLeft) / 10);<br>                var step = (target - window.pageYOffset) / 10;<br>                step = step > 0 ? Math.ceil(step) : Math.floor(step);<br>                if (window.pageYOffset == target) {<br>                    // 停止动画 本质是停止定时器<br>                    clearInterval(obj.timer);<br>                    // 回调函数写到定时器结束里面<br>                    // if (callback) {<br>                    //     // 调用函数<br>                    //     callback();<br>                    // }<br>                    callback && callback();<br>                }<br>                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10<br>                // obj.style.left = window.pageYOffset + step + 'px';<br>                window.scroll(0, window.pageYOffset + step);<br>            }, 15);<br>        }<br>        })<br>        <br>        var main = document.querySelector('.main');      <br>        var mainTop = main.offsetTop;<br>        var goBack = document.querySelector('.goBack');

以上就是在线直播源码，JS动态效果之，侧边栏滚动固定效果，更多内容欢迎关注之后的文章