带阅读进度指示侧边栏列表项UI设计

PetitQ 文本/链接 2019-2-28 2.01K 0 0

这是一款带阅读进度指示的侧边栏列表项 UI 设计效果。该设计的目的是在用用户滚动鼠标时，在侧边栏列表项中每一个段落标题前都带有一个指示当前段落阅读进度的圆形进度条，使用户可以看到当前的阅读进度，提升用户体验。该阅读指示 UI 设计使用 SVG，CSS3 和 jQuery 来制作。另外在页面滚动浏览时，URL 地址会随着页面的段落而改变，处于安全原因，在本地浏览时 Chrome 浏览器可能会看不到效果。该阅读指示效果在移动手机等小屏幕设备中是隐藏的。

HTML 结构

该阅读指示效果的 HTML 结构由多个<article>元素组成，另外使用一个<aside>元素来作为文章列表的侧边栏。

也想出现在这里？联系我们吧

```
<div class="cd-articles">
```
```
  <article>
```
```
    <header>
```

      <img src="img/img-1.png" alt="article image">

```
      <h1>......</h1>
```
```
    </header>
```
```
 
```
```
    <p>......</p>
```
```
    
```
```
  </article>
```
```
 
```
```
  <article>
```
```
    
```
```
  </article>
```
```
 
```
```
  
```
```
 
```
```
  <aside class="cd-read-more">
```
```
    <ul>
```
```
      <li>
```
```
        <a href="index.html">
```

          <em>20 Star Wars Secrets Revealed</em>

```
          <b>by J. Morrison</b>
```

          <svg x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36">

          <circle fill="none" stroke="#2a76e8" stroke-width="2" cx="18" cy="18" r="16"

                  stroke-dasharray="100 100" stroke-dashoffset="100"

                  transform="rotate(-90 18 18)"></circle>

```
          </svg>
```
```
        </a>
```
```
      </li>
```
```
 
```

      <!-- additional links to articles -->

```
    </ul>
```
```
  </aside> 
```
```
</div> 
```

CSS 样式

元素仅仅在大屏幕设备（viewport 宽度大于 1100 像素）中可见，它使用绝对定位，并且它放置在.cd-articles 元素的右上角位置。.fixed class 类用于使它位置固定，一直跟着页面滚动。

@media only screen and (min-width: 1100px) {

```
  .cd-articles {
```
```
    position: relative;
```
```
    width: 970px;
```
```
    padding-right: 320px;
```
```
  }
```
```
}
```
```
 
```
```
.cd-read-more {
```
```
  /* hide on mobile */
```
```
  display: none;
```
```
}
```

@media only screen and (min-width: 1100px) {

```
  .cd-read-more {
```
```
    display: block;
```
```
    width: 290px;
```
```
    position: absolute;
```
```
    top: 3em;
```
```
    right: 0;
```
```
  }
```
```
  .cd-read-more.fixed {
```
```
    position: fixed;
```
```
    right: calc(50% - 485px);
```
```
  }
```
```
}
```

为了创建进度条效果，这里使用了 2 个 SVG 属性：stroke-dasharray 和 stroke-dashoffset。你可以将圆形进度条想象为一条虚线，stroke-dasharray 属性可以让你控制虚线和它下面的空槽，而 stroke-dashoffset 属性可以让你控制虚线的开始位置。

假如我们初始化 stroke-dasharray="100 100"，以及 stroke-dashoffset="100"，（100 是 SVG 圆形的周长），这样，虚线和空槽的长度都等于圆周长，stroke-dashoffset 也等于圆周长，而此时只有空槽是可见的。要创建圆形进度条效果，只需要修改 stroke-dashoffset 的值，使它从 100 变为 0 既可。

JavaScript

在大屏幕设备中（viewport 宽度大于 1100 像素），特效为窗口的滚动事件绑定了 2 个方法：updateArticle()和 updateSidebarPosition()。第一个方法用于检测用户正在阅读文章的哪一个段落，并相应的更新 SVG stroke-dashoffset 属性来更新圆形进度条的进度。第二个方法用于根据窗口滚动的值来更新侧边栏的位置属性，（使用 .fixed）。另外还有一个 changeUrl()函数用于根据页面段落来更新地址栏的 URL。

```
function updateArticle() {
```

  var scrollTop = $(window).scrollTop();

```
 
```

  articles.each(function(){ //articles = $('.cd-articles').children('article');

```
    var article = $(this),
```

      articleSidebarLink = articleSidebarLinks.eq(article.index()).children('a'); //articleSidebarLinks = $('.cd-read-more').find('li')

```
 
```

    if( articleTop > scrollTop) { //articleTop = $(this).offset().top

      articleSidebarLink.removeClass('read reading');

    } else if( scrollTop >= articleTop && articleTop + articleHeight > scrollTop) { //articleHeight = $(this).outerHeight()

      var dashoffsetValue = svgCircleLength*( 1 - (scrollTop - articleTop)/articleHeight); //svgCircleLength = 100

      articleSidebarLink.addClass('reading').removeClass('read').find('circle').attr({ 'stroke-dashoffset': dashoffsetValue });

      changeUrl(articleSidebarLink.attr('href'));

```
    } else {
```

      articleSidebarLink.removeClass('reading').addClass('read');

```
    }
```
```
  });
```
```
}
```
```
 
```
```
function updateSidebarPosition() {
```

  var scrollTop = $(window).scrollTop();

```
 
```

  if( scrollTop > articlesWrapperTop) { //$('.cd-articles').offset().top

    aside.removeClass('fixed').attr('style', ''); //aside = $('.cd-read-more')

  } else if( scrollTop >= articlesWrapperTop && scrollTop < articlesWrapperTop + articlesWrapperHeight - windowHeight) { // articlesWrapperHeight = $('.cd-articles').outerHeight()

    aside.addClass('fixed').attr('style', '');

```
  } else {
```

    if( aside.hasClass('fixed') ) aside.removeClass('fixed').css('top', articlesWrapperHeight + articlePaddingTop - windowHeight + 'px');//articlePaddingTop = Number($('.cd-articles').children('article').eq(1).css('padding-top').replace('px', ''))