JBTALKS.CC

标题: html问题请教各位大大~ [打印本页]
作者: TmXiaOChAo    时间: 2013-3-24 07:56 PM
标题: html问题请教各位大大~
本帖最后由 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完了他就顶在上面了.
作者: buzZsk    时间: 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    时间: 2013-3-24 08:45 PM
buzZsk 发表于 2013-3-24 08:35 PM
asdadasdasd

大大, 还不是我要的.那个黑色的div不是顶在褐色的下面 @@我是想弄黑色的div顶在褐色的下面,然后scroll的时候如果褐色被scroll完了他会顶着上方.
作者: buzZsk    时间: 2013-3-24 08:55 PM
TmXiaOChAo 发表于 2013-3-24 08:45 PM
大大, 还不是我要的.那个黑色的div不是顶在褐色的下面 @@我是想弄黑色的div顶在褐色的下面,然后scroll的时 ...

这样的话你需要javascript scroll event来知道他是不是scroll完了brown part
作者: 宅男-兜着走    时间: 2013-4-13 03:14 AM

  2. <html>
  3. <title>Joonion Tee Sample</title>
  4. </head>
  5. <script language="javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  6. <script language="javascript">

  8. $(function(){

  10.         //fix element width
  11.        
  12.        
  13.         $(window).scroll(function(){
  14.         var fixElement = $("#black-div");
  15.         var afterElement= $("#brown-div");
  16.        
  17.        
  18.         var afterElementHeight =  afterElement.position().top + afterElement.height();

  20.        
  21.         if($(this).scrollTop() >= afterElementHeight){
  22.                
  23.                 fixElement.css({"position":"fixed" , "top":"0px"})
  24.                
  25.         }else if($(this).scrollTop() <= afterElementHeight)
  26.                 fixElement.css({"position":"static"})
  27. })

  29. })
  30. </script>
  31. </head>
  32. <body>
  33. <div id="brown-div" style="width: 100%; float: left; min-height: 132px; background-color: brown;"></div>
  34. <div id='black-div' style="width: 20%; float: left; min-height: 100%; background-color: black; color: white;">
  35. asdadasdasd
  36. </div>
  37. <div id="aqua-div" style="float: right; width: 80%; height: 800px; background-color: aqua;"></div>
  38. <div style="float: right; width: 80%; height: 800px; background-color: chocolate;"></div>
  39. </body>
  40. </html>
复制代码
圣诞节快乐！
好久没回来了， 丢个代码给你参考是怎样写滴～ 哈哈哈哈哈哈哈～
作者: Dale52870    时间: 2013-6-20 08:12 PM
你是要用clear：both 是吗= =



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



欢迎光临 JBTALKS.CC (https://jbtalks.my/) Powered by Discuz! X2.5