固定导航栏
需求:当页面滚动距离超过顶部盒子的高度，那么searchBar就会出现
当页面滚动距离小于顶部盒子的高度，那么searchBar就会隐藏
获取元素
var topPart = document.getElementById("topPart");
var searchBar = document.getElementById("searchBar");
注册事件
window.onscroll = function(){
事件处理
if(getPagescroll().scrollTop >= topPart.offsetHeight){
searchBar.style.display = "block";
//searchBar.style.position = "fixed";
searchBar.className = "fixed";
}else{
searchBar.style.display = "none";
searchBar.className = "";
}
}
获取页面可视区域的大小
/*
谷歌火狐 window
IE8 document.documentElement
其他浏览器 body
console.log(getClientSize().clientWidth,getClientSize().clientHeight);
onresize 实时监控屏幕变化
*/
获取页面可视区域大小的兼容性
function getClientSize(){
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
return{
clientWidth: width;
clientHeight: height;
}
}
响应式布局
响应式布局:一个页面适应多个终端
屏幕宽度 1000以上 是pc端 背景颜色换成pink
1000-600 平板 换成yellow
600以下 手机 换成green
window.onresize = function(){
屏幕宽度
var width = getClientSize().clientWidth;
判断
if(width > 1000){
document.body.style.backgroundColor = "pink";
}else if(width >= 600){
document.body.style.backgroundColor = "yellow";
}else{
document.body.style.backgroundColor = "green";
}
}
function getClientSize(){
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
return{
clientWidth: width;
clientHeight: height;
}
}
事件对象
<body>
<div id = "diva" style = "100px;height:100px;background-color:red;"></div>
<script>
/*事件对象:当我们触发某个事件，那么和这个事件相关的一些信息就会自动保存一个对象里面，我们把这个事件叫做事件对象
当我们触发某个事件时，浏览器会自动帮我们捕捉一些关于这个事件的信息
谷歌火狐 一般是给事件处理函数添加一个形参 event ev e
IE8 使用一个全局变量来保存事件信息
*/
var diva = document.getElementById("diva");
box.onclick = function(e){
e = e || window.event
console.log("e");
console.log("111");
}
</script>
</body>
三大坐标系
<body>
<div id = "divb" style = "200px;height:200px;background-color:red;"></div>
<script>
/*事件对象:当我们触发某个事件，那么和这个事件相关的一些信息就会自动保存一个对象里面，我们把这个事件叫做事件对象
当我们触发某个事件时，浏览器会自动帮我们捕捉一些关于这个事件的信息
谷歌火狐 一般是给事件处理函数添加一个形参 event ev e
IE8 使用一个全局变量来保存事件信息
*/
var divb = document.getElementById("divb");
box.onclick = function(e){
e = e || window.event
console.log("e");
//console.log("111");
//screenX screenY表示的是从鼠标点击的点到屏幕的左上角距离
console.log("screenX" + e.screenX,"screenY" + e.screenY);
//clientX clientY表示的是鼠标点击的点到可视区域左上角的距离
console.log("clientX" + e.clientX,"clientY" + e.clientY);
//pageX paveY 表示的是鼠标点击的点到页面左上角的距离(和页面滚动无关)
//用的最多的是我们的元素定位坐标
console.log("pageX" + e.pageX,"pageY" + e.pageY);
console.log(getPagePoint(e));
}
获取事件触发点到页面左上角的距离
function getPagePoint(e){
var x = e.pageX || getPageScroll().scrollLeft + e.clientX || 0;
var y = e.pageY || getPageScroll().scrollTop + e.clientY || 0;
return{
pageX : x;
pageY : y;
}
}
function getPageScroll( ){
逻辑与的短路运算的运算规则:找真
如果这几种情况都不满足，那么就返回undefined,但有的浏览器不支持undefined
var left = window.PageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft || getPageScroll().scrollLeft;
var top = window.PageYoffset || document.documentElement.scrollTop || document.body.scrollTop || getPageScroll().scrollTop;
//返回函数值
return{
scrollLeft:left;
scrollTop:top;
}
}
</script>
</body>