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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现朋友圈查看图片
Sep 11 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获取当前url的具体方法全面解析
2013/11/26 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
微信小程序使用Promise简化回调
2018/02/06 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
基于python 字符编码的理解
2017/09/02 Python
python判断无向图环是否存在的示例
2019/11/22 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
入党转正申请书范文
2019/05/20 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书