268268 </div >
269269
270270 <div class =" row items-center q-ml-lg q-mt-sm" >
271- <div style =" width : 400px ; height : 50 px " >
271+ <div style =" width : 400px ;" >
272272 <PageScroller v-show =" pageCount > 1" ref =" pageScroller1" v-model =" search.page" :page-count =" pageCount" />
273273 </div >
274274
@@ -908,6 +908,7 @@ class Search {
908908
909909 onScroll () {
910910 const curScrollTop = this .$refs .scroller .scrollTop ;
911+ const toolpanelviewportoffset = this .$refs .toolPanel .getBoundingClientRect ().top ;
911912
912913 if (this .ignoreScrolling ) {
913914 this .lastScrollTop = curScrollTop;
@@ -916,24 +917,29 @@ class Search {
916917 return ;
917918 }
918919
920+
921+ if (this .lastScrollTop == curScrollTop) return ; // если событие вызвано более 1 раза на 1 скролл
922+
919923 if (! this .lastScrollTop )
920924 this .lastScrollTop = 0 ;
921- if (! this .lastScrollTop2 )
922- this .lastScrollTop2 = 0 ;
923925
924- if (curScrollTop - this .lastScrollTop > 0 ) {
925- this .$refs .toolPanel .style .position = ' relative' ;
926- if (this .lastScrollTop2 <= curScrollTop - this .$refs .toolPanel .clientHeight )
927- this .lastScrollTop2 = 0 ;
926+ if (curScrollTop - this .lastScrollTop > 0 ) { // страницу крутят вверх
927+ if (this .$refs .toolPanel .style .position == " sticky" ) // Если блок приклеен к окну
928+ this .$refs .toolPanel .style .top = ` ${ curScrollTop} px` ;// Приклеиваем его к позиции в родителе
929+ this .$refs .toolPanel .style .position = " relative" ;
930+ if (toolpanelviewportoffset< - this .$refs .toolPanel .offsetHeight ) // Но не даём блоку оказаться дальше своей высоты за экраном
931+ this .$refs .toolPanel .style .top = ` ${ curScrollTop- this .$refs .toolPanel .offsetHeight } px` ;
932+ } else {
933+ if (toolpanelviewportoffset>= 0 )
934+ {
935+ this .$refs .toolPanel .style .top = " 0px" ;
936+ this .$refs .toolPanel .style .position = " sticky" ;
937+
938+ }
939+ }
940+ this .lastScrollTop = curScrollTop;
928941
929- this .$refs .toolPanel .style .top = ` ${ this .lastScrollTop2 } px` ;
930- } else {
931- this .$refs .toolPanel .style .position = ' sticky' ;
932- this .$refs .toolPanel .style .top = 0 ;
933- this .lastScrollTop2 = curScrollTop;
934- }
935942
936- this .lastScrollTop = curScrollTop;
937943 }
938944
939945 async ignoreScroll (ms = 300 ) {
@@ -948,6 +954,8 @@ class Search {
948954 scrollToTop () {
949955 this .$refs .scroller .scrollTop = 0 ;
950956 this .lastScrollTop = 0 ;
957+ this .$refs .toolPanel .style .top = " 0px" ;
958+ this .$refs .toolPanel .style .position = " sticky" ;
951959 }
952960
953961 updatePageCount () {
0 commit comments