3.29 學前端 jquery之操作元素之CSS操作
阿新 • • 發佈：2019-01-27
3.2 CSS操作
3.2.1(樣式)
css("{color:'red',backgroud:'blue'}")3.2.2(位置)
offset()
position()
scrollTop()
scrollLeft() 3.2.3(尺寸)
height()
width() 例項 返回頂部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script 例項 滾動選單
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="images/3.jpg">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首頁</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1張</a></div>
<div class="catalog-item" auto-to="function2"><a>第2張</a></div>
<div class="catalog-item" auto-to="function3"><a>第3張</a></div>
</div>
<div class="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.2.3.js"></script>
<script type="text/javascript">
window.onscroll=function(){
var ws=$(window).scrollTop();
if (ws>50){
$(".catalog").addClass("fixed")
}
else {
$(".catalog").removeClass("fixed")
}
$(".content").children("").each(function(){
var offtop=$(this).offset().top;
//console.log(offtop)
var total=$(this).height()+offtop;
if (ws>offtop && ws<total){
if($(window).height()+$(window).scrollTop()==$(document).height()){
var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")
console.log(index)
target='div[auto-to="'+index+'"]';
$(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
}
else{
var index=$(this).attr("menu");
target='div[auto-to="'+index+'"]';
$(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
}
}
})
}
</script>
</body>
</html>