js上下视差滚动简单实现代码


Posted in Javascript onMarch 07, 2017

前言: 项目中让实现一个简单的上下视差滚动,就是当页面滑动到某一固定位置时,让上下两页面出现叠加效果,恢复时,展开恢复。

功能技术实现方式:元素定位,鼠标事件

思路1:

一开始想着设置滚动条监听事件,当到固定位置时下方元素设置relative属性(这样可保证不改变其原有样式而且可以实现元素位置的调整),于是就诞生出一下代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .div1{
      width: 100%;
      height: 500px;
      background: #FF0000;
      position: fixed;
      top: 0;
      left: 0;
    }
    .div2{
      width: 100%;
      margin-top: 500px;
      height: 1000px;
      background: #22B0FC;
      position: relative;
      z-index: 2;;
    }
  </style>
  <body>
    <div class="div1">1111111</div>
    <div class="div2">22222222222222</div>
  </body>
  <script src="jquery-1.8.3.min.js"></script>
  <script>
    $(document).ready(function () { 
      $(window).scroll(function () {
        var scrollTop=$(window).scrollTop();
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        $('.div2').css('top',-scrollTop);
      });
    });
  </script>
</html>

问题:运行以上代码就会发现有一个很明显的bug,虽然大体功能已经实现了,但是因为relative的元素不管如何移动,还是会占有原本的位置。然而我们的期望是,滚动条到达让下方元素底部时就不应该滑动了,如何解决呢?

思路2:

我思考了良久,但是仍然没发现可以让元素既不占位置,又不改变自身样式,所以我大胆放弃relative,选择absolute定位,这个就需要我们自己做样式的调整,具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .clearfix:after {
       content: '';
       display: block;
       clear: both;
      }
    .div1{
      width: 100%;
      margin: 0 auto;
      height: 500px;
      background: bisque;
      position: fixed;
      top: 0;
      left: 0;
    }
    .div1 div{
      width: 1200px;
      margin: 0 auto;
      height: 500px;
      background: #FF0000;
    }
    .div2{
      width: 1200px;
      margin: 0 auto;
      height: 1500px;
      background: #22B0FC;
      z-index: 20000;;
      margin-top: 500px;
    }
  </style>
  <body>
    <div class="div1 clearfix">
      <div>111111111111111111111111111111111111111</div>
    </div>
    <div class="div2">22222222222222</div>
  </body>
  <script src="jquery-1.8.3.min.js"></script>
  <script>
    var div2Height=Number($('.div2').offsetTop);
      var clientHeight=Number($(document).clientHeight);
      var totalHeight=div2Height-clientHeight;
      var objOffset=$('.div2').offset().top;
      var objOffsetLf=$('.div2').offset().left;
      $(document).ready(function () { //本人习惯这样写了
      $(window).scroll(function () {
        var scrollTop=$(window).scrollTop();
        var objHeight=objOffset-scrollTop;
        console.log(scrollTop);
         if(scrollTop>=0){
          $('.div2').css({'left':objOffsetLf,'top':objHeight,'position':'absolute','margin-top':'0px'});
        }else{
          $('.div2').css({'position':'static','margin-top':'500px'});
        }
      });
    });
  </script>
</html>

注意:①上半部分元素的位置需要保持不动②下半部分确保层级要高于上半部分③本代码针对的是上半部分固定,如果想让其跟着动,需要确保下半部分滚动速度要大于上半部分

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

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
JS如何生成随机验证码
Mar 02 Javascript
详解Vue slot插槽
Nov 20 Vue.js
js实现下一页页码效果
Mar 07 #Javascript
原生JS中slice()方法和splice()区别
Mar 06 #Javascript
浅析vue component 组件使用
Mar 06 #Javascript
js常用的继承--组合式继承
Mar 06 #Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 #Javascript
canvas仿iwatch时钟效果
Mar 06 #Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
javascript some()函数用法详解
2014/11/13 PHP
php内存缓存实现方法
2015/01/24 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Python selenium 三种等待方式解读
2016/09/15 Python
python 内置函数filter
2017/06/01 Python
Python线性回归实战分析
2018/02/01 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python多进程并发demo实例解析
2019/12/13 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
sort命令的作用和用法
2012/11/04 面试题
运动会开幕式主持词
2014/03/28 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年加油站工作总结
2014/12/04 职场文书
民事代理词范文
2015/05/25 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers