Skip to content

Commit

Permalink
fix(sticky): 解决四个bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@zyqq
zyqq committed Jun 6, 2019
1 parent 7c3bb17 commit 82cd051
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 163 deletions.
180 changes: 26 additions & 154 deletions src/demo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,158 +1,30 @@
<template>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<p>段落10</p>
<p>段落11</p>
<p>段落12</p>
<p>段落13</p>
<p>段落14</p>
<p>段落15</p>
<p>段落16</p>
<p>段落17</p>
<p>段落18</p>
<p>段落19</p>
<p>段落20</p>
<p>段落21</p>
<p>段落22</p>
<p>段落23</p>
<p>段落24</p>
<p>段落25</p>
<p>段落26</p>
<p>段落27</p>
<p>段落28</p>
<p>段落29</p>
<p>段落30</p>
<p>段落31</p>
<p>段落32</p>
<p>段落33</p>
<p>段落34</p>
<p>段落35</p>
<p>段落36</p>
<p>段落37</p>
<p>段落38</p>
<p>段落39</p>
<p>段落40</p>
<p>段落41</p>
<p>段落42</p>
<p>段落43</p>
<p>段落44</p>
<p>段落45</p>
<p>段落46</p>
<p>段落47</p>
<p>段落48</p>
<p>段落49</p>
<p>段落50</p>
<w-sticky distance="100">
<div style="border:1px solid red;">粘滞内容</div>
</w-sticky>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<p>段落10</p>
<p>段落11</p>
<p>段落12</p>
<p>段落13</p>
<p>段落14</p>
<p>段落15</p>
<p>段落16</p>
<p>段落17</p>
<p>段落18</p>
<p>段落19</p>
<p>段落20</p>
<p>段落21</p>
<p>段落22</p>
<p>段落23</p>
<p>段落24</p>
<p>段落25</p>
<p>段落26</p>
<p>段落27</p>
<p>段落28</p>
<p>段落29</p>
<p>段落30</p>
<p>段落31</p>
<p>段落32</p>
<p>段落33</p>
<p>段落34</p>
<p>段落35</p>
<p>段落36</p>
<p>段落37</p>
<p>段落38</p>
<p>段落39</p>
<p>段落40</p>
<p>段落41</p>
<p>段落42</p>
<p>段落43</p>
<p>段落44</p>
<p>段落45</p>
<p>段落46</p>
<p>段落47</p>
<p>段落48</p>
<p>段落49</p>
<p>段落50</p>
<p>段落51</p>
<p>段落52</p>
<p>段落53</p>
<p>段落54</p>
<p>段落55</p>
<p>段落56</p>
<p>段落57</p>
<p>段落58</p>
<p>段落59</p>
<p>段落60</p>
<p>段落61</p>
<p>段落62</p>
<p>段落63</p>
<p>段落64</p>
<p>段落65</p>
<p>段落66</p>
<p>段落67</p>
<p>段落68</p>
<p>段落69</p>
<p>段落70</p>
<p>段落71</p>
<p>段落72</p>
<p>段落73</p>
<p>段落74</p>
<p>段落75</p>
<p>段落76</p>
<p>段落77</p>
<p>段落78</p>
<p>段落79</p>
<p>段落80</p>
<p>段落81</p>
<p>段落82</p>
<p>段落83</p>
<p>段落84</p>
<p>段落85</p>
<p>段落86</p>
<p>段落87</p>
<p>段落88</p>
<p>段落89</p>
<p>段落90</p>
<p>段落91</p>
<p>段落92</p>
<p>段落93</p>
<p>段落94</p>
<p>段落95</p>
<p>段落96</p>
<p>段落97</p>
<p>段落98</p>
<p>段落99</p>
<p>段落100</p>
<div style="display:flex;justify-content: center;">
<div style="width:500px;border:1px solid black;">
<w-sticky distance="100">
<div style="border:1px solid red;">粘滞内容</div>
</w-sticky>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<p>段落10</p>
<p>段落11</p>
<p>段落12</p>
<p>段落13</p>
<p>段落14</p>
<p>段落15</p>
<p>段落16</p>
<p>段落17</p>
<p>段落18</p>
<p>段落19</p>
<p>段落20</p>
</div>
</div>
</template>
<script>
Expand Down
30 changes: 21 additions & 9 deletions src/sticky/sticky.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<template>
<div class="wheel-sticky" :class="classes" ref="wrapper">
<slot></slot>
<div class="wheel-sticky-wrapper" ref="wrapper" :style="{height}">
<div class="wheel-sticky" :class="classes" :style="{left, width}">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'WheelSticky',
data() {
return {
sticky: false
sticky: false,
left: undefined,
height: undefined,
width: undefined
}
},
computed: {
Expand All @@ -18,10 +23,19 @@ export default {
}
}
},
created() {
mounted() {
// top 多次获取会改变，因此只能获取一次
let top = this.top()
window.addEventListener('scroll', () => {
if(window.scrollY > this.top()) {
if(window.scrollY > top) {
console.log('滚动过了')
let { height, width, left } = this.$refs.wrapper.getBoundingClientRect()
// 需要给最外层div加高度让他占位置，否则会出现不能滚动的情况
this.height = `${height}px`
// 有可能sticky内容是延迟加载的，所以宽度会变，应该浮起来的时候再赋值
this.width = `${width}px`
// 有可能居中，因此left会变
this.left = `${left}px`
this.sticky = true
} else {
this.sticky = false
Expand All @@ -39,12 +53,10 @@ export default {
}
</script>
<style lang="scss" scoped>
.wheel-sticky {
&.sticky {
.wheel-sticky-wrapper {
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
}
</style>

0 comments on commit 82cd051

Please sign in to comment.