使用swiper和吸顶效果代码
<!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和吸顶效果代码的更多相关文章
- JQ实现吸顶效果代码
吸顶下过代码跟简单几行代码就可以了 如果滚动的军力大于100,就改变导航的定位方式,否则就默认 $(function(){ $(window).scroll(function(){ ...
- 自定义tab吸顶效果一(原理)
PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
- 基于scroll的吸顶效果
本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- [RN] React Native 头部 滑动吸顶效果的实现
React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- tabControl组件的吸顶效果
最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...
- Html吸顶效果
Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...
- better-scroll之吸顶效果巨坑挣扎中
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...
随机推荐
- 一个很好介绍js的例子
function UpdateInit(opt){ this.init(opt);} UpdateInit.prototype={ loadUrl:null, loadParam:null, befo ...
- 使用iskindofclass来发现对象是否是某类或其子类的实例
发现对象是否是特定类或其子类的实例 要发现对象是否是某类或其子类的实例,请在对象上调用 isKindOfClass: 方法.当应用程序需要发现其响应的消息(实现的或继承的),它有时进行以上的检查. s ...
- 多数求和(java)
实验题目:从命令行接受多个数字,求和之后输出结果. 设计思想:命令行输入的字符会赋值给args数组,所以在命令行输入数字后,直接取出args的数组长度,作为循环语句的终点判断,然后利用循环将字符型改为 ...
- BZOJ 3687 简单题
bitset维护某个和是否存在. bit<<x:所有子集的和+x. #include<iostream> #include<cstdio> #include< ...
- BZOJ 1954 The xor-longest Path
问题转化为一些数里面选两个数异或和最大. #include<iostream> #include<cstdio> #include<cstring> #includ ...
- HTML的窗口分帧
下面通过一个后台管理的部分设计来说明窗口分帧 frameset.html代码 <!-- <frameset>标签(常用来做后台管理界面) 属性:rows(行).cols(列).可以使 ...
- Why does my ListView scroll to the top when navigating backwards?
I’ve seen a few people asking this question. They have a page which contains a ListView and when an ...
- javascript js表示中文日期的经典写法
<div id="time"> <script>document.getElementById('time').innerHTML=new Date().t ...
- LeetCode Binary Tree Paths(简单题)
题意: 给出一个二叉树,输出根到所有叶子节点的路径. 思路: 直接DFS一次,只需要判断是否到达了叶子,是就收集答案. /** * Definition for a binary tree node. ...
- [转]SQL:JOIN用法
JOIN连接组合两个表中的字段记录,包括三种: INNER JOIN运算式:连接组合两个表中的字段记录. LEFT JOIN运算式:连接组合两个表中的字段记录,并将包含了LEFT JOIN左边表中的全 ...