From 55631090fdc92fef5ea32fb6438a4aa9d75378d6 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Thu, 22 Jul 2021 09:39:48 +0800
Subject: [PATCH] fix(article): goto top visible logic & position adjust

---
 src/containers/tool/ArticleSticker/index.tsx       |  3 ++-
 src/containers/tool/ArticleSticker/styles/index.ts | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/containers/tool/ArticleSticker/index.tsx b/src/containers/tool/ArticleSticker/index.tsx
index bc4e5f534..50cca2671 100755
--- a/src/containers/tool/ArticleSticker/index.tsx
+++ b/src/containers/tool/ArticleSticker/index.tsx
@@ -45,6 +45,7 @@ const ArticleStickerContainer: FC<TProps> = ({
     viewingData,
     activeThread,
     isTocMenuOpened,
+    isArticleDigestInViewport,
     showCommentSticker,
   } = store
 
@@ -67,7 +68,7 @@ const ArticleStickerContainer: FC<TProps> = ({
               />
               <CommentSticker show={showCommentSticker} data={viewingData} />
             </MainWrapper>
-            <GoTopWrapper>
+            <GoTopWrapper show={!isArticleDigestInViewport}>
               <GotoTop />
             </GoTopWrapper>
           </InnerWrapper>
diff --git a/src/containers/tool/ArticleSticker/styles/index.ts b/src/containers/tool/ArticleSticker/styles/index.ts
index 6e91138bb..53c06629a 100755
--- a/src/containers/tool/ArticleSticker/styles/index.ts
+++ b/src/containers/tool/ArticleSticker/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import type { TTestable, TMetric } from '@/spec'
+import type { TTestable, TMetric, TActive } from '@/spec'
 import Img from '@/Img'
 import { animate, theme, css } from '@/utils'
 
@@ -10,9 +10,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
 }))<TWrapper>`
   ${css.flexColumn('align-center', 'justify-start')};
   ${({ metric }) => css.fitStickerWidth(metric)};
-  /* bottom has a go-to-top button */
-  height: 85vh;
-  /* border: 1px solid tomato; */
+  min-height: 68vh;
 `
 export const InnerWrapper = styled.div`
   ${css.flexColumn('justify-between')}
@@ -73,8 +71,10 @@ export const Text = styled.div`
   font-size: 11px;
 `
 
-export const GoTopWrapper = styled.div`
+export const GoTopWrapper = styled.div<TActive>`
   ${css.flex('align-both')};
-  position: relative;
+  opacity: ${({ show }) => (show ? 1 : 0)};
+  position: absolute;
+  bottom: -50px;
   width: 100%;
 `