<!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{
100%;
height: 300px;
background-color: yellow;
}
.box{
100%;
height: 100px;
}
.box1{
margin-right: 101px;
height: 100px;
background-color: #FFFFFF;
}
.box2{
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{
100%;
background-color: pink;
}