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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body { width:1000px; margin:0 auto; }

.top { height:200px; background-color:#6FF;}

.left { width:500px; float:left; background:#f4f4f4; height:3000px;}

.right { width:500px; float:right; height:1500px; background-color:#CCF; }

.rightPostion { bottom:0px; top:auto; left:50%;}

.bot { clear:both; background-color:#cc3; min-height:150px;}

.cont {

    overflow: auto; position:relative;

}

</style>

</head>

<body>

<div class="top">此处显示  class "top" 的内容</div>

<div class="cont">

  <div class="left" id="left">此处显示  class "left" 的内容</div>

  <div class="right rightPostion" id="right">

    <p>此处显示  class "right" 的内容</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>3</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>5</p>

    <p>&nbsp;</p>

    <p>&nbsp;</p>

    <p>ss</p>

    <p>&nbsp;</p>

    <p>d</p>

    <p>s</p>

    <p>d</p>

    <p>s</p>

    <p>笔筒圣诞节</p>

  </div>

</div>

<div class="bot">此处显示  class "bot" 的内容</div>

<script>

var r= document.getElementById("right");

var l = document.getElementById("left");

document.onkeydown = keydown ;

window.onmousewheel = document.onmousewheel = wheel;

var screenH =  window.screen.availHeight;

var maxH = l.offsetHeight+200-screenH;

var positionH =  r.offsetHeight+200-screenH    ;

function wheel(){

if(document.body.scrollTop>=positionH&&document.body.scrollTop<maxH){

    r.style.position = "fixed"

    }

    else if (document.body.scrollTop<positionH)  {r.style.position = "static" }

    else {

        r.style.position = "absolute"

    }    

}

function keydown (e){

    e = e || e.event ;

    var code = e.keyCode||e.which||e.charCode;

    console.log(code);

    if(code ==38 || code ==40){

        wheel()

        }

    }

</script>

</body>

</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. （转载）Mysql中，SQL语句长度限制

    (转载)http://qjoycn.iteye.com/blog/1288435 今天发现了一个错误:Could not execute JDBC batch update 最后发现原因是SQL语句长 ...

  2. git_share

    linux 环境(192.168.8.58) 1. 生成rsa key $ ssh-keygen 如果你之前没有跑过这个文件, 接受默认选项即可. 这样你会在 ~/.ssh/下看到 id_rsa和id ...

  3. House Robber II——Leetcode

    After robbing those houses on that street, the thief has found himself a new place for his thievery ...

  4. [转]使用Linux命令行测试网速

    装speedtest-cli speedtest-cli是一个用Python编写的轻量级Linux命令行工具,在Python2.4至3.4版本下均可运行.它基于Speedtest.net的基础架构来测 ...

  5. 实现自己的脚本语言ngscript之三：语法设计

    这是第四篇了,之所以隔了这么久才写,一方面是因为最近开始实习了,另一方面是因为设计语法真是要考虑很多东西. 于是我去读了这本书,里面实现了两种语言,一种跟js差不多语法,用ast解释执行:另一种语法类 ...

  6. lightoj 1021 - Painful Bases 状态压缩

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1021 #include<cstring> #include<cstd ...

  7. 自动布局AutoLayout

    1:理解概念 Auto Layout 中文翻译过来意思是 自动布局 ,通过内定的 Constraint (约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图. 将我们想象中的 ...

  8. div页面居中(上下左右)

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

  9. POJ 1737 统计有n个顶点的连通图有多少个 （带标号）

    设f(n)为所求答案 g(n)为n个顶点的非联通图 则f(n) + g(n) = h(n) = 2^(n * (n - 1) / 2) 其中h(n)是n个顶点的联图的个数 这样计算 先考虑1所在的连通 ...

  10. 构造Nginx避免直接使用IP通路Webserver

    他看上去非常Nginx构造,似乎忽略了ip直接访问Web问题,从理论上讲,这是不利于SEO优化,因此,我们希望能够避免直接使用IP访问该网站,但域名.详细介绍了如何做到这一点,看看下面的. 在官方文件 ...