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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
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运行时强制显示出错信息的代码
2011/04/20 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
js实现每日签到功能
2018/11/29 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python守护线程用法实例
2017/06/23 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python实现多层感知器
2019/01/18 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
心理健康教育制度
2014/01/27 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
使用python绘制横竖条形图
2022/04/21 Python