<template> <div> <sticky :top="top" :z-index="zIndex"> <sticky-menu :top="top" :data="menus" :parent="parent"></sticky-menu> </sticky> // 滚动区内容存放位置 <slot></slot> </div> </template> <script> import Sticky from './sticky.vue' import StickyMenu from './menu.vue' export default { // 这里简写了，因为上面已经有了。 props: { top, menus, parent, zIndex, offsetHeight }, components: { Sticky, StickyMenu } } </script>
使用示例
<template> <div> ... 其他内容 <sticky-anchor menus="menus" parent=".page-demo"> <ul> <li>视图一</li> <li>视图二</li> </ul> </sticky-anchor> </div> </template> <script> import StickyAnchor from 'components/sticky-anchor.vue' export default { data() { return { menus: [ { label: '按钮一', value: '.button-1' }, { label: '按钮二', value: '.button-2' } ] } }, components: { StickyAnchor } } </script>
总结
到这里整个功能已经全部实现了，我们来总结一下。
吸顶效果用两种解决方案，如果浏览支持 sticky 布局，使用 css 更加方便。 使用 a 标签做锚点定位更加简单，但遇到定位布局需要特殊处理，但会改变路由 hash。 做锚点与滚动联动时需要注意按钮点击事件与滚动事件冲突。