功能就是当右边高度没有左边高的情况下做的一些处理，由于本人技术有限，不兼容所有浏览器，

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. body { width:1000px; margin:0 auto; }
  8. .top { height:200px; background-color:#6FF;}
  9. .left { width:500px; float:left; background:#f4f4f4; height:3000px;}
  10. .right { width:500px; float:right; height:1500px; background-color:#CCF; }
  11. .rightPostion { bottom:0px; top:auto; left:50%;}
  12. .bot { clear:both; background-color:#cc3; min-height:150px;}
  13. .cont {
  14.     overflow: auto; position:relative;
  15. }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <div class="top">此处显示  class "top" 的内容</div>
  21. <div class="cont">
  22.   <div class="left" id="left">此处显示  class "left" 的内容</div>
  23.   <div class="right rightPostion" id="right">
  24.     <p>此处显示  class "right" 的内容</p>
  25.     <p>&nbsp;</p>
  26.     <p>&nbsp;</p>
  27.     <p>&nbsp;</p>
  28.     <p>&nbsp;</p>
  29.     <p>&nbsp;</p>
  30.     <p>&nbsp;</p>
  31.     <p>&nbsp;</p>
  32.     <p>&nbsp;</p>
  33.     <p>3</p>
  34.     <p>&nbsp;</p>
  35.     <p>&nbsp;</p>
  36.     <p>&nbsp;</p>
  37.     <p>5</p>
  38.     <p>&nbsp;</p>
  39.     <p>&nbsp;</p>
  40.     <p>ss</p>
  41.     <p>&nbsp;</p>
  42.     <p>d</p>
  43.     <p>s</p>
  44.     <p>d</p>
  45.     <p>s</p>
  46.     <p>笔筒圣诞节</p>
  47.   </div>
  48. </div>
  49. <div class="bot">此处显示  class "bot" 的内容</div>
  50. <script>
  51. var r= document.getElementById("right");
  52. var l = document.getElementById("left");
  53. document.onkeydown = keydown ;
  54. window.onmousewheel = document.onmousewheel = wheel;
  55. var screenH =  window.screen.availHeight;
  56. var maxH = l.offsetHeight+200-screenH;
  57. var positionH =  r.offsetHeight+200-screenH    ;
  58. function wheel(){
  59.  
  60. if(document.body.scrollTop>=positionH&&document.body.scrollTop<maxH){
  61.     r.style.position = "fixed"
  62.     }
  63.     else if (document.body.scrollTop<positionH)  {r.style.position = "static" }
  64.     else {
  65.         r.style.position = "absolute"
  66.     }    
  67.  
  68. }
  69. function keydown (e){
  70.     e = e || e.event ;
  71.     var code = e.keyCode||e.which||e.charCode;
  72.     console.log(code);
  73.     if(code ==38 || code ==40){
  74.         wheel()
  75.  
  76.         }
  77.     }
  78.  
  79. </script>
  80. </body>
  81. </html>

仿照淘宝首页做的一个高度伪对齐demo的更多相关文章

  1. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  2. 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

  3. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  4. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  5. 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  7. 淘宝首页源码藏美女彩蛋(上)（UED新作2013egg）

    今日,偶尔翻看淘宝源码,发现竟有美女形状源码.如下图: 此段代码在console中运行,结果更为惊叹. 亲手尝试的读者已经看到了代码运行的结果.taobao.com的console打印出了UED的招聘 ...

  8. 淘宝三角做法防CSS2D转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇，超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

随机推荐

  1. Java获取当前路径

    1.利用System.getProperty()函数获取当前路径:System.out.println(System.getProperty("user.dir"));//user ...

  2. 利用qemu模拟嵌入式系统制作全过程

    http://www.tinylab.org/using-qemu-simulation-inserts-the-type-system-to-produce-the-whole-process/ 利 ...

  3. 宁波Uber优步司机奖励政策（1月25日~1月31日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 第十七章、程序管理与 SELinux 初探 工作管理 (job control)

    工作管理 (job control) 这个工作管理 (job control) 是用在 bash 环境下的,也就是说:『当我们登陆系统取得 bash shell 之后,在单一终端机介面下同时进行多个工 ...

  5. 转 ：hdoj 4857 逃生【反向拓扑】

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  6. 353. Design Snake Game

    贪食蛇. GAME OVER有2种情况,1是咬到自己,2是出界. 1)用QUEUE来保留占据的格子,每走一格就添加1个,然后POll()最后一个. 做一个一样的SET来check要走的格子是不是已经在 ...

  7. 【MySQL性能优化】改进MySQL Order By Rand()的低效率

    <a href="http://click.aliyun.com/m/9153/">点击查看原文</a> 正 文:   最近由于需要研究了一下MYSQL的随 ...

  8. [转]jquery中使用event.target的几点

    转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 ...

  9. xml学习篇（二） ----JSON 和XML对比

    在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言 ...

  10. ELK监控系统nginx / mysql慢日志

    ELK监控系统nginx / mysql慢日志 elasticsearch logstash kibana ELK监控系统nginx日志 1.环境准备 centos6.8_64 mini IP:192 ...