jquery实现楼层滚动效果


Posted in jQuery onJanuary 01, 2018

本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码,供大家参考,具体内容如下

html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="css/base.css" rel="external nofollow" > 
  <style> 
    #header,#f1,#f2,#f3{ 
      width: 80%; 
      height: 500px; 
      background: yellow; 
      margin-left: 10%; 
      margin-top: 50px; 
    } 
    #f1{ 
      background: green; 
    } 
    #f2{ 
      background: red; 
    } 
    #f3{ 
      background: blue; 
    } 
    #lift{ 
      position: fixed; 
      top: 280px; 
      display: none; 
    } 
    .lift_btn{ 
      display: inline-block; 
      width: 50px; 
      height: 50px; 
      border: 1px solid #000; 
    } 
    .hover{ 
      background: red; 
    } 
  </style> 
</head> 
<body> 
  <div id="header"></div> 
  <div class="floor" id="f1"> 
    <p>第一层</p> 
  </div> 
  <div class="floor" id="f2"> 
    <p>第二层</p> 
  </div> 
  <div class="floor" id="f3"> 
    <p>第三层</p> 
  </div> 
  <div id="lift"> 
    <ul> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>1</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>2</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>3</span> 
        </a> 
      </li> 
    </ul> 
  </div> 
 
  <script src="js/jquery.min.js"></script> 
  <script src="js/floor.js"></script> 
</body> 
</html>

js:

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$('html,body').scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop<scrollTop+innerHeight/2) 
      $lift.fadeIn(500); 
    else 
      $lift.fadeOut(500); 
    var $floors=$(".floor"); 
    $floors.each((i,elem)=>{ 
      var $f=$(elem); 
      if($f.offset().top<scrollTop+innerHeight/2) 
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); 
    }); 
  }); 
 
  $lift.children("ul").on("click","li",function(){ 
    var $li=$(this); 
    var i=$li.index(); 
    var $fi=$(".floor:eq("+i+")"); 
    var offsetTop=$fi.offset().top; 
    $("html").animate({ 
      scrollTop:offsetTop-60 
    },500) 
  }) 
})();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
详解各版本React路由的跳转的方法
2018/05/10 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python去除字符串两端空格的方法
2015/05/21 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
安全生产检查通报
2014/01/29 职场文书
入职担保书怎么写
2014/05/12 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
货款欠条范本
2015/07/03 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
解析Java异步之call future
2021/06/14 Java/Android
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang