category:
  en: Layout
  zh-CN: 布局
icon: ''
tags:
  en:
    - layout
    - sticky
  zh-CN:
    - 布局
    - 定位
extra: |
  ::: tip
  在Chrome模拟器运行时你可能会发现没有效果，这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone，目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试，但是真机上是完全正常的交互。
  <br>
  <br>
  你也可以设置禁用原生支持检测以获得相同的效果：`:check-sticky-support="false"`
  :::

  如果你没有使用`100%`的布局，也没有头部可以直接这样使用

  ``` html
  <sticky>
    <div>Blabla</div>
  </sticky>
  ```

  如果你像demo一样使用`view-box`和`x-header`，那么需要这样：

  ``` html
  <sticky scroll-box="vux_view_box_body" :offset="46">
    <div>Blabla</div>
  </sticky>
  ```

  建议加一个`div`高度为内容高度，这样可以避免当定位为`sticky`时下面的元素会突然向上走。

  ``` html
  // 禁用原生检测时，可以在外围加
  <div style="height:44px;">
    <sticky scroll-box="vux_view_box_body" :offset="46" :check-sticky-support="false">
      <div>Blabla</div>
    </sticky>
  </div>

  // 使用原生检测时，`div`紧挨着组件之后，并设置类名`vux-sticky-fill`
  <sticky scroll-box="vux_view_box_body" :offset="46">
    <div>Blabla</div>
  </sticky>
  <div class="vux-sticky-fill" style="height:44px;"></div>
  ```

  ::: warning
  请不要直接照复制 demo 代码，滚动容器为 window 时请不要指定 scroll-box，滚动容器并非使用 `view-box` 时 id 并不是 `vux_view_box_body`，请按照实际情况来设定。
  :::


props:
  scroll-box:
    default: window
    en: scroll tagget
    zh-CN: '滚动容器，默认为`window`，如果你使用了viewbox，那么你需要指定容器id：`vux_view_box_body`'
  check-sticky-support:
    type: Boolean
    default: 'true'
    en: if check if sticky is supported on current browser
    zh-CN: 是否检测当前浏览器是否支持sticky特性，禁用则在`iPhone`设置上也使用`scroll`实现
  offset:
    type: Number
    default: 0
    en: top distance
    zh-CN: '距离顶部高度，在存在头部（如使用了`x-header`）的情况下需要设置一个距离'
  disabled:
    version: v2.9.0
    type: Boolean
    default: false
    en: whether disable sticky
    zh-CN: 是否禁用，在某些浏览器禁用，比如万恶的 UC
slots:
  default:
    en: content
    zh-CN: 内容插槽
methods:
  bindSticky:
    version: v2.5.4
    en: manually re-bind sticky
    zh-CN: 手动重新绑定，用于内容变化导致位置变化定位不再正确的情况
tips:
  zh-CN:
    - 
      q: 定位位置、时机不正确
      a: |
        出现这个问题可能是由于在 sticky 上方布局存在异步加载内容，比如图片、延迟加载的内容块。

        这些情况下需要自己判断正确的加载完成的时机调用  `bindSticky` 方法。如果知道图片或者延迟加载的区域大小可以直接设置尺寸用以占位，其他情况下要根据实际情况处理。

        相关 issue: [#2564](https://github.com/airyland/vux/issues/2564)。
    -
      q: UC 浏览器下闪烁跳动
      a: |

        `UC 浏览器`的 webview 不支持 `sticky` 也无法实时响应 `onscroll` 事件，fixed 定位的元素会在滚动时跳动，暂时无法解决。

        如果面对的用户群使用 UC 浏览器，建议暂时使用绑定属性 `disabled` 来禁用功能。


        ``` js
        data () {
          return {
            disabled: typeof navigator !== 'undefined' && /iphone/i.test(navigator.userAgent) && /ucbrowser/i.test(navigator.userAgent)
          }
        }
        ```

        如果你有解决方案，欢迎来 PR 贡献。

        相关 issue [#2601](https://github.com/airyland/vux/issues/2601)。

changes:
  v2.9.0:
    en:
      - '[feature] add prop:disabled #2601'
      - '[enhance] add development tip if scroll-box doesnot exist'
    zh-CN:
      - '[feature] 添加属性 disabled #2601'
      - '[enhance] scroll-box 不存在时在开发模式下进行提示'
  v2.7.7:
    en:
      - '[fix] Fix the problem of inaccurate positioning and invalid positioning 0 #2367'
    zh-CN:
      - '[fix] 修复定位不准确和定位无效的问题 #2367'
  v2.5.9:
    en:
      - '[fix] Fix scrollTop always return 0 #1827'
    zh-CN:
      - '[fix] 修复 scrollTop 总是返回0的问题 #1827'
  v2.5.4:
    en:
      - '[fix] Auto re-bind after router-view transition is finished'
      - '[fix] Fix position fixed not work in ios #1657'
    zh-CN:
      - '[fix] 在 router-view 动画结束后自动重新绑定'
      - '[fix] 修复在ios上fixed不生效的问题 #1657'
  v2.1.1-rc.1:
    en:
      - '[fix] Fix wrong offset after transition between routes'
      - '[enhance] Set z-index #976 @olymk'
    zh-CN:
      - '[fix] 修复路由间有过渡动画导致顶部距离计算不准确的问题'
      - '[enhance] 设置 z-index 避免被覆盖 #976 @olymk'