js之pc端网页特效（2）client系列，立即执行函数，scroll系列，mouseenter和mouseover区别以及案例

本文链接：https://blog.youkuaiyun.com/m0_61547956/article/details/124603943

本文详细介绍了JavaScript中client系列属性，包括clientTop、clientLeft、clientWidth和clientHeight的用法。还探讨了立即执行函数的定义和作用，以及scroll系列属性在获取元素滚动距离上的应用。通过仿淘宝固定侧边栏的案例，展示了如何利用window.pageYOffset实现固定定位效果。此外，还对比了mouseenter和mouseover事件的区别，指出了mouseenter不冒泡的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五、mouseenter和mouseleave的区别

一、client系列

获得的数值都不带单位

clientTop获取元素的上边框大小；

clientLeft获取元素的左边框大小；

宽度clientWidth获取盒子大小，clientHeight获取盒子高度大小，不包含边框，包含padding,其余和offset系列一样。

offset系列获取元素偏移比较方便，client系列获取元素大小比较方便，scroll系列获取元素的滚动距离。

二、立即执行函数

不需要调用，能够立即执行的函数

格式：( function( ){ } ) ()或者 ( function( ){ }( ) )

可以想象成第一个括号是函数声明，第二个括号是调用。如果有多个立即执行函数，要用分号隔开，可以给函数起名字。

作用：单独创建了一个作用域，不会有命名冲突。

三、scroll系列

获取的数值都不带单位

scrollWidth获取元素宽度大小，不包含边框，包含padding，scrollHeight获取元素高度大小。

scrollTop获取元素被卷去的头部，scroll获取元素被卷去的左部，需要添加滚动事件。

四、案例之仿淘宝固定侧边栏

window.pageYOffset页面被卷去的头部，X被卷去的左部。

分析：

随着页面滚动到一定位置时，右侧绿色小滑块变为固定定位，滑到快底部一定位置出现“返回顶部”四个字，点击可以返回顶部。

设置头部区域200px，banner区域400px，main区域400px，绿色滑块50px采用定位定到右侧

1.当页面滚动(因为是页面滚动，所以是document.addEventListener)到头部区域刚好看不到时，也就是scrollTop=200是，滑块变为固定定位，因为开始设置的滑块的top值为300px，如果光改变为固定定位的话，会出现跳一下的情况，由图二变到图三，但是我们想要的是图二，所以让滑块的style.top=offsetTop-banner的offsetTop。

2."返回顶部"一开始设置为display:none,当滚动到一定高度display:block,添加点击事件，点击之后到页面最开始的地方，window.scroll(0,0)

代码如下

<!DOCTYPE html>
<!-- DTD
声明了DTD，使用documnet.documentElement.scrollTop
未声明 document.body.scrollTop
新方法window.pageYOffset IE9开始时支持
 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        .w {
            width: 1000px;
            margin: 0 auto;
            height: 2000px;
        }
        
        .header {
            height: 200px;
            background-color: antiquewhite;
        }
        
        .banner {
            height: 400px;
            background-color: aqua;
        }
        
        .main {
            height: 400px;
            background-color: blue;
        }
        
        .slibar-bar {
            position: absolute;
            top: 300px;
            left: 1131px;
            width: 50px;
            height: 100px;
            background-color: chartreuse;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
    <script src="animate.js"></script>
</head>

<body>
    <div class="slibar-bar">
        <span class="goback">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
</body>
<script>
    //页面被卷曲的头部 window.pageYOffset 被卷曲的左侧X
    //元素被卷曲的头部是element.scrollTop 
    var slider = document.querySelector('.slibar-bar');
    var banner = document.querySelector('.banner');
    // console.log(banner.offsetTop);
    var bannerTop = banner.offsetTop;
    var sliderTop = slider.offsetTop - bannerTop;
    var main = document.querySelector('.main');
    var go = document.querySelector('.goback');
    var mainTop = main.offsetTop;

    //页面滚动所以是document
    document.addEventListener('scroll', function() {
            console.log(parseInt(window.pageYOffset));
            if (parseInt(window.pageYOffset) >= bannerTop) {
                slider.style.position = 'fixed';
                // slider.style.top = sliderTop + 'px';
            } else {
                slider.style.position = 'absolute';
                slider.style.top = '300px';
            }
            if (parseInt(window.pageYOffset) >= mainTop) {
                go.style.display = 'block';
            } else {
                go.style.display = 'none';
            }
        })
        //当点击了返回顶部模块，就让窗口滚动到顶部
    go.addEventListener('click', function() {
            // window.scroll(0, 0);//没有单位直接写数字 不揉合
            //因为是窗口滚动，所以对象是window 柔和
            animation(window, 0);


        })
        //带有动画的返回顶部
</script>

</html>