前言：最近工作中，有这样一个场景，判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。为了以后再次遇到，所以记录下来，并分享。转载请注明出处：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. jzoj5864

    本來這道題該100的,沒想到考試沒想最短路,直接跑暴力了 實際上這道題有原題跳樓機 那道題在模x的意義下統計答案 現在,我們要統計n個數的答案 30pts為提高組原題 剩下70pts,可以記dis[i ...

  2. javascript浅拷贝深拷贝理解记录

    javascript的深拷贝和浅拷贝问题几乎是面试必问的问题.好记性不如烂笔头,特此来记录一下自己对深拷贝浅拷贝的理解. 顾名思义,拷贝就是copy复制,在js中可以浅而理解为对一个对象或者数组的复制 ...

  3. GCD 中使用 dispatch group 进行同步操作

    话不多说,先上代码,在分析 Code - (void)viewDidLoad { [super viewDidLoad]; dispatch_group_t group1 = dispatch_gro ...

  4. CSS3 :nth-child(n)使用注意

    :nth-child(n)    ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n)   ---->选中p元素,且该p元素必须是某个父元素下的第 ...

  5. mysql 执行 sql 语句提示Parameter '@XXX' must be defined

    执行 sql 语句 MySqlException: Parameter '@maxNo' must be defined. 执行 sql 中含有自定义变量 @maxNo,抛出异常 解决方法: 连接字符 ...

  6. Java之IO(八)PipedIutputStream和PipedOutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7056278.html 1.前言 本章介绍Java的IO体系中最后一对字节流--管道流.之前在字节数组流的时候就说 ...

  7. 开源视频会议bigbluebutton

    这是另一个开源视频会议项目,简称bbb 官方网站:http://bigbluebutton.org/ 代码地址:https://code.google.com/p/bigbluebutton/ dem ...

  8. 探索DatePicker新用法

    很少用DatePicker,项目需要用到DatePicker,再用时发现跟以前有些变化,重新简单梳理一下DatePicker的用法. 先上效果图: 首先是xml文件的用法: 以前是用android:s ...

  9. 快速获取 json对象的长度

    JSON对象的长度,也就是k-v的个数(这里不包含隐式属性 ). 通过   Object.keys(obj) 获取到  keys组成的数组, 再获取length. var obj = { a:1, b ...

  10. git工具，conflict冲突解决方法

    这篇文章需要对git具有一定的了解,并且知道如何安装git工具(其实就是上git官网下载个文件,安装) git这种版本控制工具有什么好处 第一个,方便可以多人协同开发同一个项目或系统 第二个,当你系统 ...