查看: 854|回复: 5

html问题请教各位大大~

178 主题	0 好友	5358 积分

一流名嘴

Rank: 12

发消息

电梯直达

1^#

发表于 2013-3-24 07:56 PM |只看该作者 |倒序浏览

本帖最后由 TmXiaOChAo 于 2013-3-24 08:02 PM 编辑

html问题, 请帮帮忙~
<div style="width: 100%; float: left; min-height: 132px; background-color: brown;"></div>
<div style="width: 20%; float: left; min-height: 100%; position: fixed; background-color: black; color: white;">
asdadasdasd
</div>
<div style="float: right; width: 80%; height: 800px; background-color: aqua;"></div>
<div style="float: right; width: 80%; height: 800px; background-color: chocolate;"></div>

我想把左边的那个黑色position:fixed掉它,他的高度是browser的高度减掉上面那块褐色的高度.然后他是在那个褐色那块的下面.在scroll的时候上面那块褐色的会被scroll掉.然后黑色那块会顶着browser的上方.像你facebook上面蓝色的banner顶着. 目前我卡在我不能把黑色那块弄成在褐色的下方.褐色那块也被黑色的盖着了.

我刚才试了用margintop或者top能把黑色那个div定在褐色的下方可是scroll的时候会有空白部分.我要的效果类似facebook home那个page右手边广告下方那个年份.

效果就像红色那个四方型,你把上面的广告scroll完了他就顶在上面了.

收藏0

使用道具举报

buzZsk

105 主题	1 好友	4475 积分

一流名嘴

打酱油的。。

Rank: 12

发消息

2^#

发表于 2013-3-24 08:35 PM |只看该作者

<div style="width: 100%; float: left; min-height: 132px; background-color: brown;"></div>
<div style="width: 20%; float: left; min-height: 100%;z-index:-1; position: fixed; background-color: black; color: white;">
asdadasdasd
</div>
<div style="float: right; width: 80%; height: 800px; background-color: aqua;"></div>
<div style="float: right; width: 80%; height: 800px; background-color: chocolate;"></div>

是这样吗？

使用道具举报

TmXiaOChAo

178 主题	0 好友	5358 积分

一流名嘴

Rank: 12

发消息

3^#

发表于 2013-3-24 08:45 PM |只看该作者

buzZsk 发表于 2013-3-24 08:35 PM
asdadasdasd

大大, 还不是我要的.那个黑色的div不是顶在褐色的下面 @@我是想弄黑色的div顶在褐色的下面,然后scroll的时候如果褐色被scroll完了他会顶着上方.

使用道具举报

buzZsk

105 主题	1 好友	4475 积分

一流名嘴

打酱油的。。

Rank: 12

发消息

4^#

发表于 2013-3-24 08:55 PM |只看该作者

TmXiaOChAo 发表于 2013-3-24 08:45 PM
大大, 还不是我要的.那个黑色的div不是顶在褐色的下面 @@我是想弄黑色的div顶在褐色的下面,然后scroll的时 ...

这样的话你需要javascript scroll event来知道他是不是scroll完了brown part

使用道具举报

宅男-兜着走

46 主题	6 好友	6456 积分

百变名嘴

Rank: 13

发消息

5^#

发表于 2013-4-13 03:14 AM |只看该作者

<html>
<title>Joonion Tee Sample</title>
</head>
<script language="javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="javascript">
$(function(){
//fix element width
$(window).scroll(function(){
var fixElement = $("#black-div");
var afterElement= $("#brown-div");
var afterElementHeight = afterElement.position().top + afterElement.height();
if($(this).scrollTop() >= afterElementHeight){
fixElement.css({"position":"fixed" , "top":"0px"})
}else if($(this).scrollTop() <= afterElementHeight)
fixElement.css({"position":"static"})
})
})
</script>
</head>
<body>
<div id="brown-div" style="width: 100%; float: left; min-height: 132px; background-color: brown;"></div>
<div id='black-div' style="width: 20%; float: left; min-height: 100%; background-color: black; color: white;">
asdadasdasd
</div>
<div id="aqua-div" style="float: right; width: 80%; height: 800px; background-color: aqua;"></div>
<div style="float: right; width: 80%; height: 800px; background-color: chocolate;"></div>
</body>
</html>

复制代码

圣诞节快乐！
好久没回来了，丢个代码给你参考是怎样写滴～哈哈哈哈哈哈哈～

使用道具举报

Dale52870

44 主题	1 好友	1271 积分

黄金长老

Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8 Rank: 8

发消息

6^#

发表于 2013-6-20 08:12 PM |只看该作者

你是要用clear：both 是吗= =

我不是看的很懂你的问题= =“

使用道具举报

返回列表