<!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;

}

使用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. 2016 - 1 - 21 RunloopMode中的Source 与Observer

    一:CFRunLoopSourceRef 1.CFRunLoopSourceRef是事件源(输入源) 2.按照官网文档分为,Source可以分为以下几类: 2.1 Porl - Based Sourc ...

  2. int和char的相同和不同。

    int和char在存储量上有不同而且在编程的时候,这样才是正确的,如果这样的话,这是一个区别. 第二:这个和上面的道理应该是差不多的.输出97   98. 总的来说,int和char都是一个定义量器的 ...

  3. BZOJ 2982 combination

    lucas定理裸题. #include<iostream> #include<cstdio> #include<cstring> #include<algor ...

  4. BZOJ 1968 约数研究

    其实打个表就会发现,这个玩意儿是积性的,然后很happy的搞了一下. 不,不是这样. 考虑每个约数对答案的贡献,不难发现:约数i的贡献为n/i. 加之即可. #include<iostream& ...

  5. 12、SQL基础整理（运算符与优先级）

    运算符 + - * / %(取余),赋值运算符 = declare @jia int set @jia = 1+1 print @jia declare @jia int set @jia = 10% ...

  6. [转]MMORPG服务器架构

    MMORPG服务器架构 一.摘要 1.网络游戏MMORPG整体服务器框架,包括早期,中期,当前的一些主流架构2.网络游戏网络层,包括网络协议,IO模型,网络框架,消息编码等.3.网络游戏的场景管理,A ...

  7. PHP header() 函数详细说明(301、404等错误设置)

    原文来自:http://www.veryhuo.com/a/view/41466.html 如果您刚刚开始学习PHP,可能有许多函数需要研究,今天我们就来学习一下PHP Header()的使用方法,更 ...

  8. python解析smart结构数据

    python编程解析如下smart结构数据,得到一行smart信息 run: smartctl -a /dev/sda out: smartctl 6.3 2014-07-26 r3976 [x86_ ...

  9. C# 网络通信基础 总结

    1.WebClient类 如果只是想从特定的URI(统一资源标识符)请求文件,则可以使用最简单的.NET类,System.Net.WebClient.支持http:.https:和file:标识符开头 ...

  10. dede首页调用栏目内容_{dede:field.content/}首页调用

    如何将已经做成单页的栏目内容调用到首页来. 常用的需要调到首页来的单页内容,比如公司简介.联系我们等内容,我们在首页可能都要进行展现.通过常规的方式,包括查阅dede官方论坛资料,都找不到比较合适的答 ...