前端入门之——后台管理页面布局 学习 day10
1、滚动滑轮事件监听
2、内容到窗口的距离
3、position:absolute
定位置：右下角
滚动：不固定
===========================后天管理页面的布局======================================
利用： absolute+overflow:auto
===========================监听滚动菜单的功能======================================
1、监听滑轮滚动事件
2、如何获取当前滚轮滑动的高度
在jQuery中 $("body").scrollTop()来获取滑轮滚动的高度 scrollLeft()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动菜单演示</title>
<style>
.menu{
position: absolute;left: 200px;width:220px;top: 48px;bottom: 0px;border: 1px solid red
}
.fafafa{
position: fixed;
top: 0px;
}
</style>
</head>
<body style="margin: 0px" onscroll="Gun();">
<div style="height: 48px;background-color: #303a40"></div>
<div id="menu" class="menu"></div>
<div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
<p>sss</p>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function Gun() {
var scrollTop=$('body').scrollTop();
if(scrollTop>48){
$("#menu").addClass("fafafa")
}
else{
$("#menu").removeClass("fafafa")
}
// console.log(scrollTop);
}
</script>
</body>
</html>
3、如何获取某个标签距离顶部高度
$(..).offset() 获取当前标签距离文档顶部的高度
$(..).height() 获取当前标签自己的高度 取得匹配元素当前计算的高度值（px）
$(..).innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
$(..).outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。设置为 true 时，计算边距在内。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动菜单演示</title>
<style>
.menu{
position: absolute;left: 200px;width:220px;top: 48px;bottom: 0px;border: 1px solid red
}
.menu a{
display: block;
}
.active{
background-color: #3c3c3c;
color:white;
}
.fafafa{
position: fixed;
top: 0px;
}
</style>
</head>
<body style="margin: 0px" onscroll="Gun();">
<div style="height: 48px;background-color: #303a40"></div>
<div id="menu" class="menu">
<a b="1">菜单一</a>
<a b="2">菜单二</a>
<a b="3">菜单三</a>
<a b="4">菜单四</a>
</div>
<div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
<div id="ii1" a="1" style="height: 500px;background-color: #5cb85c;">
</div>
<div a="2" style="height: 800px;background-color:gold"></div>
<div a="3" style="height: 1000px;background-color:blue"></div>
<div a="4" style="height:1000px;background-color:#d6e9c6"></div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function Gun() {
var scrollTop=$('body').scrollTop();
if(scrollTop>48){
$("#menu").addClass("fafafa")
}
else{
$("#menu").removeClass("fafafa");
$('#menu a').removeClass('active')
}
// console.log(scrollTop);
// var title=49;
// // $("#ii1").offset().top;
// var top=title-scrollTop;
// // console.log(top)
// if(top<0){
//
// }
$("#conent").children().each(function () {
var eleTop=$(this).offset().top;
var winTop=eleTop-scrollTop;
// console.log(winTop)
var winBottomTop=eleTop+$(this).height()-scrollTop;
if(winTop<=0 && winBottomTop>0){
var a=$(this).attr("a");
console.log(a);
$("#menu a[b='"+a+"']").addClass('active').siblings().removeClass('active')
return;//结束循环
}
})
}
</script>
</body>
</html>
$(window).height() 整个窗口的高度
$(document).height() 约等于整个文档的高度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动菜单演示</title>
<style>
.menu{
position: absolute;left: 200px;width:220px;top: 48px;bottom: 0px;border: 1px solid red
}
.menu a{
display: block;
}
.active{
background-color: #3c3c3c;
color:white;
}
.fafafa{
position: fixed;
top: 0px;
}
</style>
</head>
<body style="margin: 0px" onscroll="Gun();">
<div style="height: 48px;background-color: #303a40"></div>
<div id="menu" class="menu">
<a b="1">菜单一</a>
<a b="2">菜单二</a>
<a b="3">菜单三</a>
<a b="4">菜单四</a>
</div>
<div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
<div id="ii1" a="1" style="height: 500px;background-color: #5cb85c;">
</div>
<div a="2" style="height: 800px;background-color:gold"></div>
<div a="3" style="height: 1000px;background-color:blue"></div>
<div a="4" style="height:50px;background-color:#d6e9c6"></div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function Gun() {
var scrollTop=$('body').scrollTop();
if(scrollTop>48){
$("#menu").addClass("fafafa")
}
else{
$("#menu").removeClass("fafafa");
$('#menu a').removeClass('active')
}
// console.log(scrollTop);
// var title=49;
// // $("#ii1").offset().top;
// var top=title-scrollTop;
// // console.log(top)
// if(top<0){
//
// }
$("#conent").children().each(function () {
var eleTop=$(this).offset().top;
var winTop=eleTop-scrollTop;
// console.log(winTop)
var winBottomTop=eleTop+$(this).height()-scrollTop;
var docHeight=$(document).height();
var winHeight=$(window).height();
console.log(docHeight-winHeight)
console.log(scrollTop)
//由于浏览器兼容问题，可能会导致 docHeight-winHeight==scrollTop 不成立，可以改成<=
if(docHeight-winHeight<=scrollTop){
$("#menu a:last").addClass('active').siblings().removeClass('active')
}else {
if (winTop <= 0 && winBottomTop > 0) {
var a = $(this).attr("a");
// console.log(a);
$("#menu a[b='" + a + "']").addClass('active').siblings().removeClass('active')
return;//结束循环
}
}
})
}
</script>
</body>
</html>
添加一个返回顶部功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动菜单演示</title>
<style>
.menu{
position: absolute;left: 200px;width:220px;top: 48px;bottom: 0px;border: 1px solid red
}
.menu a{
display: block;
}
.active{
background-color: #3c3c3c;
color:white;
}
.fafafa{
position: fixed;
top: 0px;
}
</style>
</head>
<body style="margin: 0px" >
<div style="height: 48px;background-color: #303a40"></div>
<div id="menu" class="menu">
<a b="1">菜单一</a>
<a b="2">菜单二</a>
<a b="3">菜单三</a>
<a b="4">菜单四</a>
</div>
<div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
<div id="ii1" a="1" style="height: 500px;background-color: #5cb85c;">
</div>
<div a="2" style="height: 800px;background-color:gold"></div>
<div a="3" style="height: 1000px;background-color:blue"></div>
<div a="4" style="height:50px;background-color:#d6e9c6"></div>
</div>
<div style="cursor: pointer; position: fixed;right: 0;bottom: 0;width: 50px;height: 50px;background-color: #1b6d85" onclick="f1();">返回顶部</div>
<script src="jquery-3.3.1.js"></script>
<script>
function f1() {
$(window).scrollTop(0);
}
window.onscroll=function () {
var scrollTop=$('body').scrollTop();
if(scrollTop>48){
$("#menu").addClass("fafafa")
}
else{
$("#menu").removeClass("fafafa");
$('#menu a').removeClass('active')
}
// console.log(scrollTop);
// var title=49;
// // $("#ii1").offset().top;
// var top=title-scrollTop;
// // console.log(top)
// if(top<0){
//
// }
$("#conent").children().each(function () {
var eleTop=$(this).offset().top;
var winTop=eleTop-scrollTop;
// console.log(winTop)
var winBottomTop=eleTop+$(this).height()-scrollTop;
var docHeight=$(document).height();
var winHeight=$(window).height();
console.log(docHeight-winHeight)
console.log(scrollTop)
//由于浏览器兼容问题，可能会导致 docHeight-winHeight==scrollTop 不成立，可以改成<=
if(docHeight-winHeight-1<=scrollTop){
$("#menu a:last").addClass('active').siblings().removeClass('active')
}else {
if (winTop <= 0 && winBottomTop > 0) {
var a = $(this).attr("a");
// console.log(a);
$("#menu a[b='" + a + "']").addClass('active').siblings().removeClass('active')
return;//结束循环
}
}
})
}
</script>
</body>
</html>
浙公网安备 33010602011771号