# Scrollspy

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

## Code scaffolding

Run `ng generate component component-name --project scrollspy` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project scrollspy`.
> Note: Don't forget to add `--project scrollspy` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build scrollspy` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build scrollspy`, go to the dist folder `cd dist/scrollspy` and run `npm publish`.

## Running unit tests

Run `ng test scrollspy` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## 使用方法

### 跟随tab部分
`<farris-scrollspy [scrollspyData]="tabs" [currentSection]="currentTab" [fFollowType]="'tab'" [scrollGroupId]="'scroll'"></farris-scrollspy>`
1. scrollspyData 跟随监听滚动的跟随项数组
2. currentSection 当前active项id
3. fFollowType 跟随样式 默认side 可选项tab
4. scrollGroupId 若一个页面中需要使用两次或以上该滚动监听功能，则除了第一次使用，其他每次使用都需要加上该属性，来标记该滚动属于哪个分组

#### 扩展区域
`<ng-template scrollspyItem let-scrollItem='scrollItem'>`
该扩展区域内放置自定义跟随项样式

### 主体区域 被监听滚动的内容区域
`<div class="scroll-section" fScrollSpyContainer [fOffset]="50" (fScrollChange)="scrollSectionChange($event)" style="height: 400px; overflow-y: auto;">`
主体部分需要有高度，并且有滚动条设置;
1. 需要设置fScrollSpyContainer属性，当页面需要使用两次及以上该功能时，需要传递值，标志滚动属于哪个分组 `<div [fScrollSpyContainer]="'scroll'" ...>`
2. offset 偏移量，点击及滚动时每个section的偏移量 默认值是0 ; 
3. 添加了fScrollSpyContainer属性的标签，默认加上了position:relative样式
#### 主体部分事件
1. fScrollChange 监听滚动区域变化事件，接收参数为当前滚动到区域部分的id

4. 添加了fScrollSpyContainer 属性的标签，默认加上position:relative 样式了


#### 被跟随section部分
`<span [fScrollSpy]="'xxx'"></span>`
1. fScrollSpy 属性 传递当前section唯一标识的id
2. fScrollGroup 当一个页面中需要使用两次及以上该功能，需要传递值，标志滚动属于哪个分组 `<div [fScrollSpy]="'basic'" [fScrollGroup]="'scroll'" ...>`

### 注意事项
当同一个页面需要使用两个及以上该功能，下面地方需要传递分组情况的属性，其中XXX部分值需要保持一致:
```
<farris-scrollspy [scrollspyData]="tabs" [currentSection]="currentTab" [fFollowType]="'tab'" [scrollGroupId]="'XXX'"></farris-scrollspy>

<div class="scrollspy-content" [fScrollSpyContainer]="'XXX'" [fOffset]="50" (fScrollChange)="scrollTabChange($event)" style="height: 400px; overflow-y: auto;">
    <div class="section" [class.active]="currentTab === 'basic'">
        <span [fScrollSpy]="'basic'" [fScrollGroup]="'XXX'" class="anchor"></span>
    </div>
</div>
```