affix

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
     <router-view></router-view>
-  </div>
 </template>
 
 <script>
@@ -54,7 +52,7 @@ body {
 }
 
 .noteHeaderShade {
-  background: linear-gradient(to top,rgba(255,255,255,0.7),rgba(255,255,255,1));
+  background-color: white;
   width:100%;
   height:40px;
   border-bottom: dashed #ed4014 1px;

src/views/EditNote.vue

@@ -75,12 +75,11 @@
 
     <Layout>
 
+      <div style="position:fixed;z-index:10;width:100%">
         <Header class="header">
           <Row>
             <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-
-          <Affix :offset-top="0">
             <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
 
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
@@ -124,13 +123,22 @@
 
 
             </div>
-          </Affix>
-
-
 
             </Col>
           </Row>
         </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <div class="noteHeader" style="height:40px;"></div>
+            </Col>
+          </Row>
+        </div>
+      </Content>
 
       <Content class="content">
         <div style="min-height: 650px;">
@@ -195,6 +203,7 @@ import { isWeixin } from "@/libs/utils";
 import NoteConstant from "@/libs/constants";
 import html2canvas from "html2canvas";
 
+
 export default {
   name: 'EditNote',
   props: {},
@@ -301,21 +310,6 @@ export default {
     window.wasm_bindgen(window.wasm_flate_bg_path);
   },
   mounted() {
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-
-    myObserver.observe(someOtherEl);
-
     window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
   },
   updated() {
@@ -602,7 +596,7 @@ export default {
       });
     },
     beforeunloadHandler() {
-      if(this.state.deleted==0){
+      if (this.state.deleted == 0) {
         setStoreText(this.noteForm, this.state, this.secret);
       }
     },

src/views/ViewNote.vue

@@ -162,12 +162,12 @@
 <template>
   <div class="layout">
     <Layout>
-
+      <div style="position:fixed;z-index:10;width:100%">
         <Header class="header">
           <Row>
             <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
-          <Affix :offset-top="0">
+
             <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
               <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()">
@@ -235,13 +235,25 @@
 
             </div>
 
-          </Affix>
+
 
 
 
             </Col>
           </Row>
         </Header>
+      </div>
+
+      <Content class="content">
+        <div>
+          <Row>
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
+            <div class="noteHeader" style="height:40px;"></div>
+            </Col>
+          </Row>
+        </div>
+      </Content>
 
       <Content class="content">
         <div style="min-height: 650px;">
@@ -252,7 +264,7 @@
               <div ref="html2canvas" id="wrapper" style="border-left: 2px solid white;">
                 <Skeleton :loading="showSkeleton">
                   <template #template>
-                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;" >
+                    <div style="  padding: 10px;  width: 100%;  height: 800px;text-align: left;">
                       <SkeletonItem />
                       <SkeletonItem block width="80%" height="16px" />
                       <SkeletonItem width="80%" height="16px" class="ivu-mr" />
@@ -452,21 +464,6 @@ export default {
 
   },
   mounted() {
-
-    const myObserver = new ResizeObserver(entries => {
-      // iterate over the entries, do something.
-      entries.forEach(entry => {
-        let affix = document.querySelector('.ivu-affix');
-        if (affix) {
-          affix.setAttribute("style", "top: 0px; width: " + (entry.contentRect.width + 2) + "px;");
-        }
-
-      });
-    });
-
-    const someOtherEl = document.querySelector('#wrapper');
-    myObserver.observe(someOtherEl);
-
     let qrimg = document.getElementById("qrImg");
     let qrurl = "https://flagnote.com/" + this.noteForm.key;
     var opts = {