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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
使用jquery实现轮播图效果
Jan 02 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python微信撤回监测代码
2019/04/29 Python
python语言元素知识点详解
2019/05/15 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
兼职业务员岗位职责
2014/01/01 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
公务员年度个人总结
2015/02/12 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书