scroll事件实现监控滚动条并分页显示示例(zepto.js )

时间:2023-12-24 09:01:37

今天做了一个类似于手机端京东首页的页面,效果图如下:

scroll事件实现监控滚动条并分页显示示例(zepto.js )

刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果):

scroll事件实现监控滚动条并分页显示示例(zepto.js )

当标题栏滑过轮播图后,透明度就会渐变成1了.

下面是另外做的一个小demo来展示实现这个效果,同时这里也涉及到滚动条的问题哦!

因为脱离项目写这个demo的时候,发现写$('.content1').scroll(function () { 代码... });的时候,没有运行里面的代码.

后来换成$('body').scroll(function () { 代码... });也是一样没有任何反应,我的天,到底是哪里出了问题???

接着想到了document,于是就试着$(document).scroll(function () { 代码... });居然实现了,可是这样子的话就没法获取到scrollTop了.

所以问题出现在滚动事件的触发者这里,那怎么改可以让子容器滚动而不是document呢???

----------------------------------------------------------------------------这里是代码分割线 Begin--------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  <title></title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <style>
    * {
      margin: 0;
    }
    html {
      height: 100%;
    }
    body {
      height: 100%; /*必须要设html和body的高度*/
    }
    header{
      width: 100%;
      height: 2.2rem;
      line-height: 2.2rem;
      background: rgba(0,173,176,0);
      text-align: center;
      position: fixed;
    }
    .content1 {
      height: 100%;
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
    }
    .content1 .img {
      height:8rem;
      line-height: 8rem;
      background: #0894EC;
      text-align: center;
    }
    .content1 .box {
      height: 50rem;
      background: #EFEFEF;
    }
  </style>
</head>
<body>
  <header>标题栏</header>
  <div class="content1">
    <div class="img">
      假装这里是轮播图
    </div>
    <div class="box">
      这里是好多好多的内容
    </div>
  </div>

  <!--以下是引用SUI框架js文件代码-->
  <script src='../dist/js/zepto.min.js'></script>
  <script>
    $('.content1').scroll(function () {
      var contentH = $(this).get(0).scrollHeight; // 所要滑动的元素内容的高度
      var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的距离
      var containerH = $('.img').height()+44; // 图片的高度
      if(scrollTop>0 && scrollTop <= containerH){
        var a = scrollTop / containerH;
        $('header').css('background','rgba(0,173,176,'+a+')');
      }
    });
  </script>
</body>
</html>

--------------------------------------------------------------------这里是代码分割线 End----------------------------------------------------------------

这里可以看到,蓝色代码是实现子容器滚动的关键,而橙色代码是实现标题栏透明度渐变的关键代码.

好啦,今天的分享到此结束.(*^__^*) 嘻嘻……

本人刚踏入前端这个坑不久.......

如果有哪里说得不对的.希望各路大神指出,谢谢!