anchor-animation

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    :root{

      --sidebar-item-height: 36px

    }

    html,body,ul{padding: 0; margin: 0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

    .side{

      width: 200px;

      list-style-type: none;

      z-index: 5;

    }

    .side li {

      height: var(--sidebar-item-height);

      line-height: var(--sidebar-item-height);

      padding-left: 20px;

      color: #007572;

      position: relative;

    }

    .main>div{

      display: inline-block;

      vertical-align: top;

    }

    .sidebar{

      position: fixed;

      left: 0;

      top: 0;

      right: 0;

      bottom: 0;

      z-index: 10;

    }

    .sidebar-div__position{

      opacity: 0;

      height: var(--sidebar-item-height);

      width: 180px;

      padding-left: 20px;

      background-color: #e3f8f5;

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      transition: all .25s linear;

      z-index: -99;

    }

    .sidebar-div__position::after{

      content: '';

      position: absolute;

      left: 0;

      top:0;

      bottom: 0;

      width: 2px;

      background-color: #007570;

    }

    .content{

      margin: 0 0 350px 220px;

    }

    .content h3{

      background-color: #e3f8f5;

    }

  </style>

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

</head>

<body>

    <div class="main">

      <div class="sidebar">

        <ul class="side">

          <li>A-1</li>

          <li>A-2</li>

          <li>A-3</li>

          <li>A-4</li>

          <li>A-5</li>

        </ul>

        <div class="sidebar-div__position"></div>

      </div>

      <div class="content">

        <h1>这是标题</h1>

        <h3>A-1</h3>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <h3>A-2</h3>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <h3>A-3</h3>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <h3>A-4</h3>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <h3>A-5</h3>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

        <p>

          这本书讲了一个真实的故事。一位社会学的老教授，在患病去世前的十几周里，在每周的星期二，约见自己之前的一位学生，向他传授人生中的最后一课：讨论生活的意义，关于家庭、工作、感情、衰老、死亡、遗憾、原谅等重大议题。这本书只有200页厚，但我觉得可以继续压缩到100页，因为书中做了太多的背景交代和铺垫，尤其是老教授的身体逐渐衰败的过程，他的生命火烛在一点点的熄灭，几乎每一个章节都花了不少篇幅描述。作者的核心观念还是奉献爱，爱身边的人，关注自己所在的社区。这和之前看到的一个TED关于幸福的演讲是类似的，只有和重要的人建立良好的亲密关系，才会感觉到幸福。

        </p>

      </div>

    </div>

    <script type="text/javascript">

      (() => {

        const sidebarItemHeight = 36;

        const positionEl = document.querySelector('div.sidebar-div__position');

        const elements = Array.from(document.querySelectorAll('ul.side li'));

        const paragraphs = Array.from(document.querySelectorAll('.content h3'));

        for(let i = 0; i < elements.length; i++){

          ((el, index) => {

            el.addEventListener('click', e => {

              console.log('click sidebar', e.target, 'index', index);

              window.scrollTo(0, paragraphs[index].offsetTop);

            }, false);

          })(elements[i], i);

        }

        // 计算滚动条滚动方向使用

        let beforeScrollTop = document.body.scrollTop;

        let directEnum = {

          down: 'down',

          up: 'up'

        };

        /**

         * 获取滚动条滚动方向

         */

        const getScrollDirection = (elements) => {

          const elRect = elements[0].getBoundingClientRect();

          const top = Math.abs(elRect.top);

          let direction = top > beforeScrollTop

            ? directEnum.down

            : directEnum.up;

          console.log(direction, beforeScrollTop, top);

          beforeScrollTop = top;

          return direction;

        };

        // 绑定滚动事件

        window.addEventListener('scroll', _.debounce((e) => {

          let direction = getScrollDirection(paragraphs);

          let index = direction === directEnum.down

            ? -1

            : (paragraphs.length - 1);

          console.log('init index', index);

          for(let h3 of paragraphs){

            const rect = h3.getBoundingClientRect();

            const paragraphHeight = 25;

            console.log('h3-', h3.innerText, 'top', rect.top);

            if (direction === directEnum.down && rect.top < paragraphHeight * 2) {

              index += 1;

              console.log(direction, '[ hit ]', 'index', index);

            } else if (direction === directEnum.up && rect.top > paragraphHeight * 2) {

              index -= 1;

              console.log(direction, '[ hit ]', 'index', index);

            } else {

              console.log(direction, '[ miss ]', 'index', index);

            }

          }

          console.log('current index', index);

          if (index >= 0) {

            positionEl.style.opacity = 1;

            positionEl.style.top = `${(index) * sidebarItemHeight}px`;

          } else {

            positionEl.style.opacity = 0;

            positionEl.style.top = `0px`;

          }

        }, 100), false);

      })();

    </script>

</body>

</html>

anchor-animation的更多相关文章

iOS——Core Animation 知识摘抄（一）
本文是对http://www.cocoachina.com/ios/20150104/10814.html文章的关键段落的摘抄,有需要的看原文 CALayer和UIView的关系: CALayer类在 ...
【Unity3D基础教程】给初学者看的Unity教程（三）：通过制作Flappy Bird了解Native 2D中的Sprite，Animation
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子上一次我们讲了MonoBehaviou ...
Core Animation编程指南
本文是<Core Animation Programming Guide>2013-01-28更新版本的译文.本文略去了原文中关于OS X平台上Core Animation相关内容.因为原 ...
[iOS Animation]-CALayer 性能优化
性能优化代码应该运行的尽量快,而不是更快 - 理查德在第一和第二部分,我们了解了Core Animation提供的关于绘制和动画的一些特性.Core Animation功能和性能都非常强大,但如果 ...
[iOS Animation]-CALayer 显示动画
显式动画如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动 ...
[iOS Animation]-CALayer 图层几何学
图层几何学不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图 ...
[iOS Animation]-CALayer 显示方式
寄宿图图片胜过千言万语,界面抵得上千图片 ——Ben Shneiderman 我们在第一章『图层树』中介绍了CALayer类并创建了一个简单的有蓝色背景的图层.背景颜色还好啦,但是如果它仅仅是展现了 ...
Core Animation 文档翻译（第二篇）
Core Animation 文档翻译 (第二篇) 核心动画基础要素核心动画为我们APP内Views动画和其他可视化元素动画提供了综合性的实现体系.核心动画不是我们APP内Views的替代品,相反, ...
【转】通过制作Flappy Bird了解Native 2D中的Sprite，Animation
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子上一次我们讲了MonoBehaviou ...
CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

随机推荐

C# WCF的POST请求包含Stream及多个参数
当使用WCF的API的POST请求时,如果参数列表里,除了Stream类型形参,还具有多个形参, 在寄宿过程中会报错: 约定"IService1"中的操作"DoWork& ...
恶意软件开发——shellcode执行的几种常见方式
一.什么是shellcode? shellcode是一小段代码,用于利用软件漏洞作为有效载荷.它之所以被称为"shellcode",是因为它通常启动一个命令shell,攻击者可以从 ...
Clean Architecture For RazorPage 实现多语言和本地化
最近终于把多语言功能加上了,这次就再发一篇,讲一下在asp.net core环境下如何实现多语言和本地化(Globalization and localization)功能,主要参看:ASP.NET ...
Qt5之反射机制（内省）
Qt的元对象系统除了提供信号/槽机制的特性之外,它还提供了以下特性: QObject::metaObject() 返回关联的元对象 QMetaObject::className() 在运行时状态下返回 ...
shell运算方式
1.(())--整数运算 [root@m01 /server/scripts]# a=1 [root@m01 /server/scripts]# b=2 [root@m01 /server/scrip ...
Intel® QAT加速卡之逻辑实例
Intel QAT加速卡逻辑实例 1. QAT相关的名词组织关系在本手册中描述的平台上,处理器可以连接到一个或多个英特尔通信芯片组8925至8955系列(PCH)设备. 从软件角度来看,每个PCH设 ...
Docker入门之container篇
启动启动容器有两种方式,一种是基于镜像新建一个容器并启动,另外一个是将在终止状态(stopped)的容器重新启动. 因为 Docker 的容器实在太轻量级了,很多时候用户都是随时删除和新创建容器. ...
Swagger-初见
目录 Swagger简介 SpringBoot集成Swagger 配置Swagger 配置扫描接口配置Swagger开关配置API分组实体配置常用注解 Swagger简介前后端分离前端 - ...
硕盟USB3.0 转RJ45千兆网卡 TYPE A USB3.0 TO RJ45
硕盟SM-A44是一款USB3.0转RJ45千兆网口转换器.这是一种高性能和低开销的解决方案.转换USB端口到10 / 100/ 1000M以太网端口可以让您的笔记本,台式机电脑能够通过USB接口连接 ...
Redis单节点安装与使用
1.配置阿里云yum源下载配置文件 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7 ...

anchor-animation

anchor-animation的更多相关文章

随机推荐

热门专题