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 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
vuex实现简易计数器
Oct 27 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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编写PDF文档生成器
2006/10/09 PHP
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php生成短域名函数
2015/03/23 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JS实现购物车特效
2017/02/02 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript