<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="my-header">header</div>
<div class="box">
<div class="box2">
<a href="#"></a>
</div>
<div class="box1">
<div class="swiper-container">
<ul class="swiper-wrapper">
<!--这里的li元素设置了swiper-slide类，其父元素必须设置swiper-container-->
<!--然后其爷爷元素必须设置为swiper-container类，三者要挨着-->
<li class="swiper-slide"><a href="###">全部1</a></li>
<li class="swiper-slide"><a href="###">全部2</a></li>
<li class="swiper-slide"><a href="###">全部3</a></li>
<li class="swiper-slide"><a href="###">全部4</a></li>
<li class="swiper-slide"><a href="###">全部5</a></li>
<li class="swiper-slide"><a href="###">全部6</a></li>
<li class="swiper-slide"><a href="###">全部7</a></li>
<li class="swiper-slide"><a href="###">全部8</a></li>
<li class="swiper-slide"><a href="###">全部9</a></li>
<li class="swiper-slide"><a href="###">全部10</a></li>
<li class="swiper-slide"><a href="###">全部11</a></li>
<li class="swiper-slide"><a href="###">全部12</a></li>
</ul>
</div> </div>
</div> <div class="content">
<p>啦啦1</p><p>啦啦2</p><p>啦啦3</p><p>啦啦4</p><p>啦啦5</p><p>啦啦6</p>
<p>啦啦7</p><p>啦啦8</p><p>啦啦9</p><p>啦啦10</p><p>啦啦11</p><p>啦啦12</p>
<p>啦啦13</p><p>啦啦14</p><p>啦啦15</p><p>啦啦16</p><p>啦啦17</p><p>啦啦18</p>
<p>啦啦19</p><p>啦啦20</p><p>啦啦21</p><p>啦啦22</p><p>啦啦23</p><p>啦啦24</p>
<p>啦啦25</p><p>啦啦26</p><p>啦啦27</p><p>啦啦28</p><p>啦啦29</p><p>啦啦30</p>
<p>啦啦31</p><p>啦啦32</p><p>啦啦33</p><p>啦啦34</p><p>啦啦35</p><p>啦啦36</p>
p>啦啦19</p><p>啦啦20</p><p>啦啦21</p><p>啦啦22</p><p>啦啦23</p><p>啦啦24</p>
<p>啦啦25</p><p>啦啦26</p><p>啦啦27</p><p>啦啦28</p><p>啦啦29</p><p>啦啦30</p>
<p>啦啦31</p><p>啦啦32</p><p>啦啦33</p><p>啦啦34</p><p>啦啦35</p><p>啦啦36</p>
</div> <script type="text/javascript" src="jquery.js"></script>
<script src="swiper.min.js"></script> <script language="javascript">
$(function(){ var mySwiper = new Swiper ('.swiper-container', { slidesPerView:"auto", }) $(document).scroll(function(){ var aa=$(window).scrollTop();
console.log(aa);
if(aa>300){
$(".box").css("position","fixed").css("top","0");
// $(".content").css("margin-top","100px");
$(".my-header").css("margin-bottom","100px"); }else{ $(".box").css("position","").css("top","");
// $(".content").css("margin-top","0");
$(".my-header").css("margin-bottom","0px");
} }); }) </script>
</body>
</html>
相应的css文件：
body,ul,li,p{
margin:0px;
padding:0px;
}
a{
text-decoration: none;
}
.my-header{
width:100%;
height: 300px;
background-color: yellow;
}
.box{
width:100%;
height: 100px;
}
.box1{
margin-right: 101px;
height: 100px;
background-color: #FFFFFF;
}
.box2{
width:100px;
height: 100px;
background-color: green;
float: right;
background-image: url("images/more-1.jpg");
background-size:cover;
box-shadow: -5px 0px 4px #999;
}
.box1 ul{
height: 100px;
line-height: 100px;
}
.box1 ul li{
float:left;
list-style-type: none;
margin:0 25px 0 10px;
font-size:30px;
}
.box1 ul li a{
text-decoration:none;
}
.content{
width:100%;
background-color: pink;
}