前言：最近工作中，有这样一个场景，判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。为了以后再次遇到，所以记录下来，并分享。转载请注明出处：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. Mac OS 10.12 - 在VMwear Workstation12.5.2中大写键和中英文输入法的切换！

    大小写切换: Alt+CapsLock(不过必须在英文状态下)!! 输入法切换: CapsLock进行中英文输入法的切换

  2. flask源码解析之session

    内容回顾 cookie与session的区别: 1. session 是保存在服务端的键值对 2. cookie 只能保存4096个字节的数据,但是session不受限制 3. cookie保存在浏览 ...

  3. (2)特征点匹配,并求旋转矩阵R和位移向量t

    include头文件中有slamBase.h # pragma once // 各种头文件 // C++标准库 #include <fstream> #include <vector ...

  4. [bug]小程序弹出层滚动穿透问题修复

    如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal&quo ...

  5. 【wireshark】总体结构

    1. 总体结构 wireshark的总体结构如下图所示. 2. 功能模块 模块名 功能 源码子目录 GTK/Qt 处理所有的用户输入/输出(所有的窗口,对话框等等) /ui GTK: /ui/gtk ...

  6. ubuntu16.04配置java环境(重启后不会失效)

    ubuntu16.04配置java环境(重启后不会失效) 1.jdk的安装包(.tar.gz)拷贝到/opt目录下 mv jdk-8u144-linux-x64.tar.gz /opt 2.解压文件 ...

  7. js有关数组的函数

    map()和filter()函数 js的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很类似1)filter是满足条件的留下,是对原数组的过滤(筛选):2) ...

  8. 使用win10自带邮件应用发送文件

    之前的电脑装过邮件客户端,想发送文件给别人时,只需要“右键文件——发送到邮件”,就能把文件作为附件发送给对方.新电脑win10系统自带邮件客户端,所以就想直接用.但是右键发送到邮件没有关联上,用不了. ...

  9. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

  10. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...