JS特效之Scroll家族的四个网页界面实用案例（固定导航栏、两侧广告跟随、返回头部、楼层跳跃）

最新推荐文章于 2022-09-25 20:00:29 发布

溜溜的阿溜

最新推荐文章于 2022-09-25 20:00:29 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：【前端】js原生动画及特效文章标签： Scroll应用固定导航栏广告跟随楼层跳跃 JS特效

本文链接：https://blog.csdn.net/cindy647/article/details/81019230

关于scroll的介绍和封装可以在另一篇博客里找到，这里介绍四个常用的基于scroll的小案例

首先再说明其中用到的封装好的两个函数（scroll封装，缓动动画封装）

function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

//缓动动画封装
function animate(ele,target) {
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        var step = (target-ele.offsetLeft)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        ele.style.left = ele.offsetLeft + step + "px";
        console.log(1);
        if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    },18);

1、固定导航栏

需求：导航栏位于第二个盒子中，当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，让第二个盒子固定在浏览器的顶部位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        img {
            vertical-align: top;
        }
        .main {
            margin: 0 auto;
            width: 1000px;
            margin