求教大家一个关于div距离顶部距离是多少的问题

qingwadaxia_1 2018-04-02 11:14:27

...全文

1367 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

75闪光雷 2018-04-04

打赏
举报

我给你想了一个方法，不知道你知道noclick 和ondrag不一个是点击事件，一个是拖动事件，当你点击你的div时，执行函数，获取当前鼠标Y坐标，当你拖动鼠标时，获取Y2坐标，如果Y2-Y>380更换class，

qingwadaxia_1 2018-04-03

打赏
举报

引用 6 楼 jslang 的回复:

在设置fixed样式情况下获取div.offsetTop 会永远等于 document.documentElement.scrollTop || document.body.scrollTop 所以只能在没有设置fixed样式情况下获取div.offsetTop

我看了好多遍但是其实我没有太理解您这句话的意思。我想您应该知道的我想要的效果，就是下拉的时候改变div的样式为固定定位，一直往下拉都保持固定定位，但是当往上拉到一定距离的时候， div的样式就改成之前的情况也就是没有固定定位的状态。这种效果是不是还有什么更简短直白比较好的实现方法呢

天际的海浪 2018-04-03

打赏
举报

其实我那个代码并不复杂啊。要简单的也可以。只要给cc元素加个父div。父div的定位方式一直不变。获取父div的offsetTop进行判断。

 <style>
*{padding:0;margin:0;}
#cc{width:200px;height:200px;background:#ccc;}
.fixed{position:fixed;top:0;}
  </style>
<div style="height:140px"></div>
<div style="height:40px"></div>
<div style="height:200px"></div>
<div id="parent">
	<div id="cc"></div>
</div>
<div style="height:5000px"></div>
<script>
 window.onscroll = function() {
 	var cc = document.getElementById("cc");
 	var top = document.documentElement.scrollTop || document.body.scrollTop;
 	var stop = document.getElementById("parent").offsetTop;
 	if (top >= stop) {
 		cc.className = "fixed";
 	} else {
 		cc.className = "";
 	}
 }
</script>

天际的海浪 2018-04-03

打赏
举报

引用 7 楼 qingwadaxia_1 的回复:

[quote=引用 6 楼 jslang 的回复:] 在设置fixed样式情况下获取div.offsetTop 会永远等于 document.documentElement.scrollTop || document.body.scrollTop 所以只能在没有设置fixed样式情况下获取div.offsetTop

我看了好多遍但是其实我没有太理解您这句话的意思。我想您应该知道的我想要的效果，就是下拉的时候改变div的样式为固定定位，一直往下拉都保持固定定位，但是当往上拉到一定距离的时候， div的样式就改成之前的情况也就是没有固定定位的状态。这种效果是不是还有什么更简短直白比较好的实现方法呢 [/quote] 我是说，如果这样的话 var cc = document.getElementById("cc"); var top = document.documentElement.scrollTop || document.body.scrollTop; var stop = cc.offsetTop; if (top >= stop) { cc.className = "fixed"; } else { cc.className = ""; } 会每次判断时都重新获取cc.offsetTop的值，当cc元素由默认的（static）定位方式改为固定（fixed）定位方式后。cc元素的位置就改变了，再次重新获取cc.offsetTop的值就和之前的不一样了，导致之后的if (top >= stop)判断都会一直成立。所以要在页面加载初始时获取默认（static）定位方式情况下 cc.offsetTop的值，之后都用这个值进行判断，不再重新获取了。

qingwadaxia_1 2018-04-02

打赏
举报

var stop = cc.offsetTop; if(top >=stop) 如果这样写的话，那滚动条往上拉的时候， div还是固定的样式不能移出

qingwadaxia_1 2018-04-02

打赏
举报

希望能原生js的方式并且兼容浏览器的，

天际的海浪 2018-04-02

打赏
举报

在设置fixed样式情况下获取div.offsetTop 会永远等于 document.documentElement.scrollTop || document.body.scrollTop 所以只能在没有设置fixed样式情况下获取div.offsetTop

qingwadaxia_1 2018-04-02

打赏
举报

引用 4 楼 jslang 的回复:


var stop;
window.onload = function() {
	var cc = document.getElementById("cc");
	stop = cc.offsetTop;
	window.onscroll = winscroll;
	winscroll();
}
function winscroll() {
	var cc = document.getElementById("cc");
	var top = document.documentElement.scrollTop || document.body.scrollTop;

	if (top >= stop) {
		cc.className = "fixed";
	} else {
		cc.className = "";
	}
}

大神我感觉您写的这个有点复杂，if(top >=stop) 我想请问下为什么我写这个判断的时候，当滚动条下拉是到div是顶部的时候，他会固定但是为什么我上拉的时候他还是保持在顶部却不能去除样式了呢？

天际的海浪 2018-04-02

打赏
举报


var stop;
window.onload = function() {
	var cc = document.getElementById("cc");
	stop = cc.offsetTop;
	window.onscroll = winscroll;
	winscroll();
}
function winscroll() {
	var cc = document.getElementById("cc");
	var top = document.documentElement.scrollTop || document.body.scrollTop;

	if (top >= stop) {
		cc.className = "fixed";
	} else {
		cc.className = "";
	}
}

天际的海浪 2018-04-02