From f43bdd31eb2402560d36040e3f481bc524851242 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Tue, 19 Jan 2021 10:51:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui/sticky):=20=E7=B2=98=E6=80=A7=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E4=BD=BF=E7=94=A8css=E7=9A=84sticky=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E5=B8=A7=E6=95=B0=E6=8F=90=E5=8D=87=20?=
 =?UTF-8?q?=E4=B8=8D=E6=94=AF=E6=8C=81=E7=9A=84=E6=B5=8F=E8=A7=88=E5=99=A8?=
 =?UTF-8?q?=E9=99=8D=E7=BA=A7=E6=88=90fixed=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: @varlet/ui
---
 packages/varlet-ui/src/sticky/Sticky.vue      | 42 +++++++++++++------
 .../varlet-ui/src/sticky/example/index.vue    |  4 +-
 packages/varlet-ui/src/sticky/sticky.less     |  4 ++
 3 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 packages/varlet-ui/src/sticky/sticky.less

diff --git a/packages/varlet-ui/src/sticky/Sticky.vue b/packages/varlet-ui/src/sticky/Sticky.vue
index f5c20e4d775..9dea049098f 100644
--- a/packages/varlet-ui/src/sticky/Sticky.vue
+++ b/packages/varlet-ui/src/sticky/Sticky.vue
@@ -3,6 +3,8 @@
 		class="var-sticky"
 		ref="stickyEl"
 		:style="{
+			zIndex,
+			top: !isFixed ? offsetTop : null,
 			width: isFixed ? fixedWidth : null,
 			height: isFixed ? fixedHeight : null,
 		}"
@@ -11,8 +13,8 @@
 			class="var-sticky__wrapper"
 			ref="wrapperEl"
 			:style="{
+				zIndex,
 				position: isFixed ? 'fixed' : null,
-				zIndex: isFixed ? zIndex : null,
 				width: isFixed ? fixedWrapperWidth : null,
 				height: isFixed ? fixedWrapperHeight : null,
 				left: isFixed ? fixedLeft : null,
@@ -36,6 +38,8 @@ export default defineComponent({
 		const stickyEl: Ref<HTMLElement | null> = ref(null)
 		const wrapperEl: Ref<HTMLElement | null> = ref(null)
 
+		let isSupportCSSSticky = false
+
 		const isFixed: Ref<boolean> = ref(false)
 		const fixedTop: Ref<string> = ref('0px')
 		const fixedLeft: Ref<string> = ref('0px')
@@ -58,29 +62,38 @@ export default defineComponent({
 				scrollerTop = top
 			}
 
-			const { top: stickyTop, left: stickyLeft } = (stickyEl.value as HTMLElement).getBoundingClientRect()
+			const sticky = stickyEl.value as HTMLElement
+			const wrapper = wrapperEl.value as HTMLElement
+
+			const { top: stickyTop, left: stickyLeft } = sticky.getBoundingClientRect()
 			const currentOffsetTop = stickyTop - scrollerTop
 
 			if (currentOffsetTop <= offsetTop.value) {
-				fixedWidth.value = `${(stickyEl.value as HTMLElement).offsetWidth}px`
-				fixedHeight.value = `${(stickyEl.value as HTMLElement).offsetHeight}px`
-				fixedTop.value = `${scrollerTop + offsetTop.value}px`
-				fixedLeft.value = `${stickyLeft}px`
-				fixedWrapperWidth.value = `${(wrapperEl.value as HTMLElement).offsetWidth}px`
-				fixedWrapperHeight.value = `${(wrapperEl.value as HTMLElement).offsetHeight}px`
-				isFixed.value = true
-
-				props.onScroll?.(offsetTop.value, isFixed.value)
+				if (!isSupportCSSSticky) {
+					fixedWidth.value = `${sticky.offsetWidth}px`
+					fixedHeight.value = `${sticky.offsetHeight}px`
+					fixedTop.value = `${scrollerTop + offsetTop.value}px`
+					fixedLeft.value = `${stickyLeft}px`
+					fixedWrapperWidth.value = `${wrapper.offsetWidth}px`
+					fixedWrapperHeight.value = `${wrapper.offsetHeight}px`
+					isFixed.value = true
+				}
+
+				props.onScroll?.(offsetTop.value, true)
 			} else {
 				isFixed.value = false
 
-				props.onScroll?.(currentOffsetTop, isFixed.value)
+				props.onScroll?.(currentOffsetTop, false)
 			}
 		}
 
 		onMounted(() => {
+			const sticky = stickyEl.value as HTMLInputElement
+
+			isSupportCSSSticky = ['sticky', '-webkit-sticky'].includes(window.getComputedStyle(sticky).position)
+
 			window.addEventListener('scroll', handleScroll)
-			scroller = getParentScroller(stickyEl.value as HTMLElement)
+			scroller = getParentScroller(sticky)
 			scroller !== window && scroller.addEventListener('scroll', handleScroll)
 
 			handleScroll()
@@ -104,3 +117,6 @@ export default defineComponent({
 	},
 })
 </script>
+<style lang="less">
+@import './sticky';
+</style>
diff --git a/packages/varlet-ui/src/sticky/example/index.vue b/packages/varlet-ui/src/sticky/example/index.vue
index 06867db19f1..35982df994c 100644
--- a/packages/varlet-ui/src/sticky/example/index.vue
+++ b/packages/varlet-ui/src/sticky/example/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="example">
-		<var-sticky style="margin-top: 100px" offset-top="20px">
+		<var-sticky style="margin-top: 100px" offset-top="20px" @scroll="handleScroll">
 			<var-button>20px</var-button>
 		</var-sticky>
 
@@ -9,7 +9,7 @@
 		</var-sticky>
 
 		<div class="scroller">
-			<var-sticky style="margin-top: 100px" offset-top="50px" @scroll="handleScroll">
+			<var-sticky style="margin-top: 100px" offset-top="50px">
 				<var-button>50px</var-button>
 			</var-sticky>
 			<div class="i"></div>
diff --git a/packages/varlet-ui/src/sticky/sticky.less b/packages/varlet-ui/src/sticky/sticky.less
new file mode 100644
index 00000000000..6c84c477224
--- /dev/null
+++ b/packages/varlet-ui/src/sticky/sticky.less
@@ -0,0 +1,4 @@
+.var-sticky {
+	position: sticky;
+	position: -webkit-sticky;
+}