仿照淘宝首页做的一个高度伪对齐demo

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

<!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>

转载于:https://www.cnblogs.com/xiaotian747/p/3643034.html

仿照淘宝首页做的一个高度伪对齐demo相关推荐

《淘宝首页性能优化实践》文章阅读
想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这一版页面中四处弥散着个性化的味道,由于独特的个性化需求,前端也面临各方面的技术挑战: 数据来源多串行请求渲染一个模块运营数据和个性化数据匹 ...
一天造出10亿个淘宝首页，阿里工程师如何实现？
双11手淘首页的几个重要推荐场景截图如下: 如上图所示,左一场景为AIO综合会场,包括AIO日常场景(淘抢购.有好货.清单等).双11人群会场及行业会场:中间为AIOplus场景卡片综合会场,包括5张 ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
页面布局（1）：淘宝首页
大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...
淘宝首页链接跳转，非taobao.com域名下的链接处理
淘宝首页需要实现这样一个功能,对于页面上非taobao.com域名下的链接,在用户点击时,需要在链接处弹出提示框,提示用户此链接非淘宝域名下的链接,并给与用户选择是否继续访问.如果用户确认继续访问,则 ...
批一批淘宝首页的源代码
[url=http://ued.taobao.com/blog/]淘宝UED[/url]团队经常写一些很棒的技术文章,令我印象深刻的有一句话,大意如下: [quote]虽然这种方法比较hack,但是可 ...
淘宝怎么做推广？史上最全的淘宝流量入口整理
开淘宝和我们线下商店一样,本质都是卖货,要成交首先得有人来浏览,而你需要通过各种方式增加浏览数,所以简单总结了一些流量的来源,给大家分享一下,不喜勿喷. 1 自然的流量,越来越稀有宝贝标题,就是流量 ...
淘宝首页的搜索规律高级搜索页搜索规律淘宝商家应对的优化策略
探索淘宝掌柜们最关心的问题:淘宝搜索排名有规律可循吗?淘宝的关键词是自然而然的排名呢?还是有规律可循呢?我想这个答案是肯定的,正所谓无规不成方圆,任何事情都有他的规律可循,就看你是怎么去发现了,今天我 ...

仿照淘宝首页做的一个高度伪对齐demo

仿照淘宝首页做的一个高度伪对齐demo相关推荐

最新文章

热门文章