仿照淘宝首页做的一个高度伪对齐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. ...
随机推荐
- HDU-3854 LOOPS
http://acm.hdu.edu.cn/showproblem.php?pid=3853 LOOPS Time Limit: 15000/5000 MS (Java/Others) Memo ...
- ssh互信自动化脚本(待更新)
1.建立一个ip,端口,用户,密码列表 [root@localhost shell-key]# cat arg_list.txt 172.16.56.215 172.16.56.215 172.16. ...
- 把mysql 中的字符gb2312 改为gbk的方法
第一步:查找mysql的字符: mysql> show variables like '%char%';+--------------------------+----------------- ...
- Telecasting station - SGU 114(带劝中位数)
题目大意:在一个数轴上有N个点,每个点都有一个权值,在这个数轴上找一个点,是的每个点到这个点的距离之和乘上权值的总和最小. 分析:以前也遇到过类似的问题,不过并不知道这是带权值的中位数问题,百度百科有 ...
- Java Bean 获取properties文件的读取
实际的开发过程中,将一些配置属性从java代码中提取到properties文件中是个很好的选择,降低了代码的耦合度.下面介绍两种通过spring读取properties文件的方法,以ip地址配置为例. ...
- 基于ThinkPHP框架的简单的后台管理系统
版权声明:本文为博主原创文章,未经博主允许不得转载. 基于ThinkPHP框架的简单的后台管理系统 一个简单的后台管理系统,可能还不全面,可以自己改,有登录功能 实例如图:
- .net对js和css、img剥离项目进行压缩优化、cdn加速
由于网站首页以及经常用的页面初始化慢,想后面想了对image.js和css进行迁移优化. 1.把他放到独立的域名上面,这个就要对image,js和css从原项目上面脱离,以及把原来很多页面引用的地址修 ...
- winform 解决界面闪动、提升加载速度 分类: WinForm 2015-02-03 16:34 161人阅读 评论(0) 收藏
说明: 从一个技术交流群里获得,经验证效果不错. //作用 加快界面加载 protected override CreateParams CreateParams { ...
- C:\WINDOWS\system32\drivers\etc\hosts host文件夹里面的内容是什么?
这个文件是根据TCP/IP for Windows 的标准来工作的,它的作用是包含IP地址和Host name(主机名)的映射关系,是一个映射IP地址和Host name(主机名)的规定,规定要求每段 ...
- 一个备份MySQL数据库的简单Shell脚本(转)
Shell脚本是我们写不同类型命令的一种脚本,这些命令在这一个文件中就可以执行.我们也可以逐一敲入命令手动执行.如果我们要使用shell脚本就必须在一开始把这些命令写到一个文本文件中,以后就可以随意反 ...