监听当前页面滚动到哪一个div

监听当前页面滚动到哪一个div

监听当前页面滚动到哪一个div_第1张图片

实现思路(当时是自己在纸上画出来的~~)
在脑子里好好琢磨琢磨,比如拿里面的一个box3举例,你怎么判断当前正好滚到它身上了呢?
滚动条会有一个滚动的长度,scrollTop,当你把前面的box1、box2正好滚没的时候,不就开始压着box3了吗?
box3有一个,offset().top,可以计算出它在当前文档里,距离最上方的top值
当滚动条的总共滚的长度减去这个top刚好等于0的时候,就正好压着box3,
当滚动条的总共滚的长度减去这个top的值介于0和这个box3高度之间时,就代表它处于压着box3的状态。
所以还需计算一下box3的高度,用这个$(“.box3”).outerHeight(true);,这个可以计算出box3整个div margin+padding+border+content 的总高度。

先单独写一个

    $(window).scroll(function () {
        var currentscrollTop = $(document).scrollTop();//当前卷进去的高度
        var top = $(".box3").offset().top; //当前box3距离窗口顶部的距离
        var height = $(".box3").outerHeight(true);//获取box3的margin+padding+border+content总高度
        if(currentscrollTop-top>0&&currentscrollTop-top<height){
            console.log("当前正压着box3");
        }
    });

整体实现,把函数封装一下,如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            height: 3000px;
            background-color: #dddddd;
        }
        #container div {
            height: 200px;
        }
        .box1,.box3 {
            background: red;
        }
        .box2,.box4 {
            background: yellow;
        }
        .box5 {
            background: blue;
        }
    style>
head>
<body>
<div id="container">
    <div class="box1">box1div>
    <div class="box2">box2div>
    <div class="box3">box3div>
    <div class="box4">box4div>
    <div class="box5">box5div>
div>
<script src="jquery-3.3.1.min.js">script>
<script>
    $(window).scroll(function () {
        whereDiv(".box1");
        whereDiv(".box2");
        whereDiv(".box3");
        whereDiv(".box4");
        whereDiv(".box5");
    });
    function whereDiv(cid) {
        var currentscrollTop = $(document).scrollTop();
        var top = $(cid).offset().top;
        var height = $(cid).outerHeight(true);
        if(currentscrollTop-top>0&&currentscrollTop-top<height){
            console.log("当前正压着"+$(cid).html());
        }
    }

script>
body>
html>

你可能感兴趣的:(前端demo)