仿照淘宝首页做的一个高度伪对齐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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>3</p>
<p> </p>
<p> </p>
<p> </p>
<p>5</p>
<p> </p>
<p> </p>
<p>ss</p>
<p> </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的更多相关文章
- 模仿淘宝首页写的高仿页面,脚本全用的原生JS,菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
- 淘宝首页源码藏美女彩蛋(下)(UED新作2013egg)
我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue+vue-cli+淘宝lib-flexible做移动端自适应
总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...
- 淘宝首页源码藏美女彩蛋(上)(UED新作2013egg)
今日,偶尔翻看淘宝源码,发现竟有美女形状源码.如下图: 此段代码在console中运行,结果更为惊叹. 亲手尝试的读者已经看到了代码运行的结果.taobao.com的console打印出了UED的招聘 ...
- 淘宝三角做法防CSS2D转换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇,超详细教程
项目内容 本案例选择>> 商品类目:沙发: 数量:共100页 4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...
随机推荐
- Windows Server 2008 网站访问PHP响应慢的解决方法
公司新上了一个网站,但是在配置完PHP环境之后却发现了问题,访问HTML速度飞快,而访问PHP网页时就要卡顿1秒,响应很慢的样子,排除了带宽的因素之后,在百度上搜了一圈竟然解决了,现在将方法转载给大家 ...
- Postman用法简介-Http请求模拟工具
在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件 ...
- 通过UIImagePickerController完成照相和相片的选取
UIImagePickerController是用于选取现有照片,或者用照相机现场照一张相片使用的 定义: @interface ShowViewController : UIViewControll ...
- Distinct Substrings - spoj 694(不重复子串个数)
题目大意:RT 分析:练手题目....后缀数组确实很强大.....多理解height数组, 切勿使用模版,后缀数组本身就有很多细节,多犯错更有利理解这个算法. 代码如下: ========== ...
- 新站上线啦,Html5Think,H5优秀资源的收集、学习、分享和交流
最近闲来做了个H5资源站,刚刚有点资源,可以访问交流下. 栏目: H5网站模板 H5动画特效 H5资源工具 H5学习资料 致力于H5的学习,通过各个H5优秀案例的学习,逐步完善自己的H5体系,有朝一日 ...
- MySql The service could not be started
MySql安装 由于需要用mySql数据库今天就把它安上了,每次安装软件,数据库总是够我们折腾的,有时出现错误甚至比重装系统还要让人头疼. 今天在安的过程中就不出了很多错误,在重启与重装的反复捣鼓中终 ...
- 基于XMPP实现的Openfire的配置安装+Android客户端的实现
最近在整理一些这方面的资料,闲话少说,咱还是直奔主题吧 :) 一.基于xmpp实现的openfire的配置安装 1. 下载最新的openfire安装文件 官方下载站点: http://www.igni ...
- windows 与Linux 互传文件
下载putty,将putty的安装路径添加到Windows的环境变量中: 我的电脑->属性->高级->环境变量->系统变量,双击其中的Path,在分号后添加putty的 ...
- java中调用js脚本
JDK1.6加入了对Script(JSR223)的支持.这是一个脚本框架,提供了让脚本语言来访问Java内部的方法.你可以在运行的时候找到脚本引擎,然后调用这个引擎去执行脚本.这个脚本API允许你为脚 ...
- 10.30 afternoon
P76竞赛时间: ????年??月??日??:??-??:?? 题目名称 他 她 它 名称 he she it 输入 he.in she.in it.in 输出 he.out she.out it.o ...