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

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

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

话不多说，直接上 Demo 吧

测试

#div1{

border: 1px solid;

height: 200px;

width: 200px;

padding: 10px;

margin: 200px;

/*浮动*/

overflow: auto;

}

#fixDiv{

background-color: antiquewhite;

}

sdf

地方

水电费

史蒂夫

鬼地方个

史3玩儿

史3水电费玩儿

212

435

电饭锅

规划局

好久

水电费

史3水电费玩儿

34

的

45

sdf

地方

水电费

史蒂夫

固定在可视区域上方

史3玩儿

史3水电费玩儿

212

435

电饭锅

规划局

好久

水电费

史3水电费玩儿

34

的

45

点击到固定元素处

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);

}

});

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

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

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

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

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

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

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

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

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

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

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

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

jquery 判断一个元素是否在数组中 &dollar;&period;inarry&lpar;&rpar;使用

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

jQuery判断一个元素是否为另一个元素的子元素&lpar;或者其本身&rpar;

如何使用jquery判断一个元素是否含有一个指定的类(class)

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

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

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

随机推荐

Model1

jsp+javabean的开发模式 此处JavaBean也可是封装的业务逻辑 流程: 浏览器端访问jsp,jsp交给Javabean处理,javabean处理后台数据,交还给Jsp

dom4j-full&period;jar 解析 XML

dom4j-full.jar 解析 XML public Document getDocument() throws DocumentException { SAXReader read=new SA ...

MES总结：CBF&period;Common 文件Net下的有类型转换

MES总结:CBF.Common 文件Net下的有类型转换. using System.Text;using System.Data;using System.ComponentModel;using ...

Android 图标上面添加提醒&lpar;二&rpar;使用开源UI类库 Viewbadger

版权声明:本文为博主原创文章,未经博主允许不得转载. 上一篇讲到用canvas进行绘制得到对应最终的bitmap. 在实际应用中,我们除了给图标添加数字外,也有可能加一些红色方块之类的图标作为新功能的 ...

Android学习之Notification

Notification可以在手机的状态栏发出一则通知,它需要用NotificationManager来管理,实现Notification其实很简单. 1.通过getsystemservice方法获得 ...

●BZOJ 4559 &lbrack;JLoi2016&rsqb;成绩比较&lpar;容斥&rpar;

题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4559 题解: 容斥,拉格朗日插值法. 结合网上的另一种方法,以及插值法,可以把本题做到 O( ...

Selenium 3 没办法启用指定的Firefox Profile

系统总会把profile复制到一个temp文件夹里,但是相关信息并不复制回去, 导致在测试注册登录功能时, 必须写在同一个脚本里:如果分成两段脚本, 登录会失败. public static void ...

Netty源码—五、内存分配概述

Netty中的内存管理应该是借鉴了FreeBSD内存管理的思想--jemalloc.Netty内存分配过程中总体遵循以下规则: 优先从缓存中分配 如果缓存中没有的话,从内存池看看有没有剩余可用的 如果 ...

【JavaScript】underscore

例: 'use strict'; _.map([1, 2, 3], (x) => x * x); // [1, 4, 9] No1: [every/some] 当集合的所有元素都满足条件时,_. ...

转载：《理解OAuth 2&period;0》 阮一峰

原文:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛 ...