前言：最近工作中，有这样一个场景，判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。为了以后再次遇到，所以记录下来，并分享。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9302392.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github (喜欢记得star哦)

话不多说，直接上 Demo 吧

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>

<head>

    <title>测试</title>

    <style>

        #div1{

            border: 1px solid;

            height: 200px;

            width: 200px;

            padding: 10px;

            margin: 200px;

            /*浮动*/

            overflow: auto;

        }

        #fixDiv{

            background-color: antiquewhite;

        }

    </style>

</head>

<body>

<div id="div1">

    <div>sdf</div>

    <div>地方</div>

    <div>水电费</div>

    <div>史蒂夫</div>

    <div>鬼地方个</div>

    <div>史3玩儿</div>

    <div>史3水电费玩儿</div>

    <div>212</div>

    <div>435 </div>

    <div>电饭锅</div>

    <div>规划局</div>

    <div>好久</div>

    <div>水电费</div>

    <div>史3水电费玩儿</div>

    <div>34</div>

    <div>的</div>

    <div>45</div>

    <div>sdf</div>

    <div>地方</div>

    <div>水电费</div>

    <div>史蒂夫</div>

    <div id="fixDiv">固定在可视区域上方</div>

    <div>史3玩儿</div>

    <div>史3水电费玩儿</div>

    <div>212</div>

    <div>435 </div>

    <div>电饭锅</div>

    <div>规划局</div>

    <div>好久</div>

    <div>水电费</div>

    <div>史3水电费玩儿</div>

    <div>34</div>

    <div>的</div>

    <div>45</div>

</div>

<button id="btn">点击到固定元素处</button>

<script type="text/javascript" src="${ctx}/static/common/js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

    var $div = $("#div1");

    //262 222 220 200

    console.log($div.outerHeight(true), $div.outerHeight(false), $div.outerHeight(), $div.innerHeight(), $div.height());

    var div = $div[0];

    //220 222 734 20 0

    console.log(div.clientHeight, div.offsetHeight, div.scrollHeight, div.offsetTop, div.scrollTop);

    $("#btn").click(function(){

        //判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。

        var fixDiv = $("#fixDiv");

        var divs = $("#div1").find("div");

        var fixDivIndex = divs.index(fixDiv);

        var oneDivHeight = fixDiv.height();

        var fixDivScrollTop = fixDivIndex * oneDivHeight;//这个元素正好在可视区域上方的scrollTop值

        var divCurrentScrollTop = $("#div1").scrollTop();

        if(fixDivScrollTop > divCurrentScrollTop > fixDivScrollTop - $("#div1").height()){

            //在可视区域内

        }else if(fixDivScrollTop < divCurrentScrollTop || divCurrentScrollTop < fixDivScrollTop - $("#div1").height()){

            $("#div1").scrollTop(fixDivScrollTop);

        }

    });

</script>

</body>

</html>

解释一下，一个元素当前所在的scrollTop值如果在最小和最大之间则说明该元素在可视范围之内。

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9302392.html

js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。的更多相关文章

  1. js判断一个元素是否在数组中

    js判断一个元素是否在数组中 var arr = ['a','s','d','f']; console.info(isInArray(arr,'a'));//循环的方式 function isInAr ...

  2. jquery and js 判断一个元素是否存在

    一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...

  3. js判断一个元素是否在数组内

    1.indexOf()返回给定元素在数组内的索引值,如果不存在则返回-1 var arr=[0,1,2,3,4,5] console.log(arr.indexOf(1)) console.log(a ...

  4. 【JS】【6】判断一个元素是否在数组中

    摘要: 有三种方式: 1,jquery的inArray方法 2,数组的indexOf方法 3,普通的for循环方法 正文: 1,jquery的inArray方法 /** * @param {Objec ...

  5. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  6. jquery 判断一个元素是否在数组中 $.inarry()使用

    需要判断一个元素是否在一个数组里: js indexOf()方法  如果存在 则返回该元素的下标值 如果不存在则返回-1 学习源头: http://www.w3school.com.cn/jsref/ ...

  7. jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...

  8. 如何使用jquery判断一个元素是否含有一个指定的类（class）

    如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结 一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...

  9. 用jQuery判断一个元素的各种状态

    用jQuery判断一个元素是否显示   用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...

随机推荐

  1. 隐藏导航栏，偏移20PX

    1:让ViewController在NavigationBar下面开始布局. automaticallyAdjustsScrollViewInsets作用 当Controller上存在唯一一个UISc ...

  2. Java 8 LocalDateTime 初使用

    LocalTime :  只包括时间 LocalDate : 只包括日期 LocalDateTime : 包括日期和时间 JDBC映射 LocalTime 对应 time LocalDate 对应 d ...

  3. win8 下 intellij idea 13 中文输入覆盖的问题

    网上的解决方案好啰嗦,精简下如下: 设置环境变量 64位:IDEA_JDK_64 32位:IDEA_JDK 设置的value必须是JDK1.6(IDEA自带1.7版本有问题),和平时设置的JAVA_H ...

  4. Kafka参数配置详解

    配置参数 参数说明 broker.id =1  每一个broker在集群中的唯一标示,要求是正数.当该服务器的IP地址发生改变时,如果broker.id没有变化,则不会影响consumers的消息情况 ...

  5. Android之系统架构

    Android 是Google开发的基于Linux平台的开源手机操作系统.它包括操作系统.用户界面和应用程序 —— 移动电话工作所需的全部软件,而且不存在任何以往阻碍移动产业创新的专有权障碍.Andr ...

  6. 原来css也可以计算-calc()使用

    在浏览其他人的源代码时,看到了一个陌生的属性:width:calc(100% - 10px -10px); 出于好奇心,百度了一下,看到了以下这篇文章,http://www.w3cplus.com/c ...

  7. WebDriver高级应用实例（1）

    1.1使用JavaScriptExecutor单击元素 被测网页的网址: http://www.baidu.com Java语言版本的API实例代码 import org.testng.annotat ...

  8. （转）mysql原生在线ddl和pt-osc原理解析

    原文:http://blog.csdn.net/zengxuewen2045/article/details/52017247 https://github.com/mysql-inception/i ...

  9. js设置全局变量 ajax中赋值

    js设置全局变量,在ajax中给予赋值赋值不上问题解决方案 方案一. //在全局或某个需要的函数内设置Ajax异步为false,也就是同步. $.ajaxSetup({async : false}); ...

  10. Linux驱动：SPI驱动编写要点

    题外话:面对成功和失败,一个人有没有“冠军之心”,直接影响他的表现. 几周前剖析了Linux SPI 驱动框架,算是明白个所以然,对于这么一个庞大的框架,并不是每一行代码都要自己去敲,因为前人已经把这 ...