1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Swiper demo</title>
  6.     <link rel="stylesheet" href="swiper.min.css">
  7.     <link rel="stylesheet" type="text/css" href="index.css">
  8. </head>
  9. <body>
  10.     <div class="my-header">header</div>
  11.     <div class="box">
  12.         <div class="box2">
  13.                 <a href="#"></a>
  14.         </div>
  15.         <div class="box1">
  16.                 <div class="swiper-container">
  17.                         <ul class="swiper-wrapper">
  18.                         <!--这里的li元素设置了swiper-slide类，其父元素必须设置swiper-container-->
  19.                         <!--然后其爷爷元素必须设置为swiper-container类，三者要挨着-->
  20.                                 <li class="swiper-slide"><a href="###">全部1</a></li>
  21.                                 <li class="swiper-slide"><a href="###">全部2</a></li>
  22.                                 <li class="swiper-slide"><a href="###">全部3</a></li>
  23.                                 <li class="swiper-slide"><a href="###">全部4</a></li>
  24.                                 <li class="swiper-slide"><a href="###">全部5</a></li>
  25.                                 <li class="swiper-slide"><a href="###">全部6</a></li>
  26.                                 <li class="swiper-slide"><a href="###">全部7</a></li>
  27.                                 <li class="swiper-slide"><a href="###">全部8</a></li>
  28.                                 <li class="swiper-slide"><a href="###">全部9</a></li>
  29.                                 <li class="swiper-slide"><a href="###">全部10</a></li>
  30.                                 <li class="swiper-slide"><a href="###">全部11</a></li>
  31.                                 <li class="swiper-slide"><a href="###">全部12</a></li>
  32.                         </ul>
  33.                 </div>
  34.  
  35.         </div>
  36.     </div>
  37.  
  38.     <div class="content">
  39.     <p>啦啦1</p><p>啦啦2</p><p>啦啦3</p><p>啦啦4</p><p>啦啦5</p><p>啦啦6</p>
  40.     <p>啦啦7</p><p>啦啦8</p><p>啦啦9</p><p>啦啦10</p><p>啦啦11</p><p>啦啦12</p>
  41.     <p>啦啦13</p><p>啦啦14</p><p>啦啦15</p><p>啦啦16</p><p>啦啦17</p><p>啦啦18</p>
  42.     <p>啦啦19</p><p>啦啦20</p><p>啦啦21</p><p>啦啦22</p><p>啦啦23</p><p>啦啦24</p>
  43.     <p>啦啦25</p><p>啦啦26</p><p>啦啦27</p><p>啦啦28</p><p>啦啦29</p><p>啦啦30</p>
  44.     <p>啦啦31</p><p>啦啦32</p><p>啦啦33</p><p>啦啦34</p><p>啦啦35</p><p>啦啦36</p>
  45.     p>啦啦19</p><p>啦啦20</p><p>啦啦21</p><p>啦啦22</p><p>啦啦23</p><p>啦啦24</p>
  46.     <p>啦啦25</p><p>啦啦26</p><p>啦啦27</p><p>啦啦28</p><p>啦啦29</p><p>啦啦30</p>
  47.     <p>啦啦31</p><p>啦啦32</p><p>啦啦33</p><p>啦啦34</p><p>啦啦35</p><p>啦啦36</p>
  48.     </div>
  49.  
  50. <script type="text/javascript" src="jquery.js"></script>
  51. <script src="swiper.min.js"></script>
  52.  
  53. <script language="javascript">
  54. $(function(){
  55.  
  56.                  var mySwiper = new Swiper ('.swiper-container', {
  57.  
  58.                     slidesPerView:"auto",
  59.  
  60.                   })        
  61.  
  62.    $(document).scroll(function(){
  63.  
  64.             var aa=$(window).scrollTop();
  65.             console.log(aa);
  66.             if(aa>300){
  67.                     $(".box").css("position","fixed").css("top","0");
  68.                    // $(".content").css("margin-top","100px");
  69.                    $(".my-header").css("margin-bottom","100px");
  70.  
  71.             }else{
  72.  
  73.                      $(".box").css("position","").css("top","");
  74.                    //  $(".content").css("margin-top","0");
  75.                    $(".my-header").css("margin-bottom","0px");
  76.             }
  77.  
  78.    });
  79.  
  80. })
  81.  
  82. </script>
  83. </body>
  84. </html>

相应的css文件：

  1. body,ul,li,p{
  2.  
  3.     margin:0px;
  4.     padding:0px;
  5. }
  6. a{
  7.     text-decoration: none;
  8.  
  9. }
  10.  
  11. .my-header{
  12. width:100%;
  13. height: 300px;
  14. background-color: yellow;
  15.  
  16. }
  17.  
  18. .box{
  19.     width:100%;
  20.     height: 100px;
  21. }
  22. .box1{
  23.     margin-right: 101px;
  24.     height: 100px;
  25.     background-color: #FFFFFF;
  26. }
  27. .box2{
  28.     width:100px;
  29.     height: 100px;
  30.     background-color: green;
  31.     float: right;
  32.     background-image: url("images/more-1.jpg");
  33.     background-size:cover;
  34.     box-shadow: -5px 0px 4px #999;
  35.  
  36. }
  37. .box1 ul{
  38.     height: 100px;
  39.     line-height: 100px;
  40.  
  41. }
  42. .box1 ul li{
  43.     float:left;
  44.     list-style-type: none;
  45.     margin:0 25px 0 10px;
  46.  
  47.     font-size:30px;
  48.  
  49. }
  50. .box1 ul li a{
  51.     text-decoration:none;
  52.  
  53. }
  54.  
  55. .content{
  56.     width:100%;
  57.     background-color: pink;
  58. }

使用swiper和吸顶效果代码的更多相关文章

  1. JQ实现吸顶效果代码

    吸顶下过代码跟简单几行代码就可以了 如果滚动的军力大于100,就改变导航的定位方式,否则就默认 $(function(){         $(window).scroll(function(){   ...

  2. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  3. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  4. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  5. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  6. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  7. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

  8. Html吸顶效果

    Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...

  9. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

随机推荐

  1. 一个基于atomic的卖票测试

    package testAtomic; import java.util.concurrent.atomic.AtomicInteger; import sun.security.krb5.inter ...

  2. Ogre学习笔记Basic Tutorial 前四课总结

    转自:http://blog.csdn.net/yanonsoftware/article/details/1011195 OGRE Homepage:http://www.ogre3d.org/   ...

  3. hdu 2036

    Ps:  - -感觉这道题完全就是数学题...就是求知道每个顶点的坐标,然后求这个多边形的面积... 代码:#include "stdio.h"#include "std ...

  4. Xtreme Toolkit Pro 免费下载地址

    Xtreme Toolkit Pro 是针对Windows程序员的一套先进的用户界面套包,强大的功能可使您的应用程序具有专业的.现代感的外观. Xtreme Toolkit Pro 由8个专业级的构件 ...

  5. redis补充和rabbitmq讲解

    线程池: redis发布订阅: rabbitMQ: MySQL; python pymysql: python orm SQLAchemy: paramiko: 堡垒机: 1.线程池 1.1 cont ...

  6. 用python做些有意思的事——分析QQ聊天记录

    ####################################### 已更新续集,戳这里. ######################################## 是这样的,有位学 ...

  7. 【LeetCode OJ】Word Break II

    Problem link: http://oj.leetcode.com/problems/word-break-ii/ This problem is some extension of the w ...

  8. Windows 2003 AD升级Windows 2008

    把Windows 2008 R2的光盘放到主域控中,运行 adprep32 /forestPrep adprep32 /domainprep adprep32 /domainprep /gpprep ...

  9. Notepad++ 编译 pascal

    一.设置——>首选项 添加pas 二.运行,在输入框中填入命令: cmd /k cd /d "$(CURRENT_DIRECTORY)" &fpc -g $(FILE ...

  10. JavaScript string.format

    //string.format String.prototype.format=function(){ var e = this, f = arguments.length; if (f > 0 ...