Javascript 具有条件位置属性的两列布局

我正在尝试从此处复制桌面中的滚动行为：

我已经用VueJS创建了我的UI，并且能够获得很多类似的功能

当滚动高度不大于视口高度时，左列的滚动属性将为“粘滞”

当“滚动高度”大于“视口高度”时，左栏将具有“滚动”属性作为“相对”，并将滚动直到过滤器到达底部，在此基础上，过滤器将变得粘滞

[缺少实现]当左列变为粘滞状态且用户向上滚动时，左列使用

top

值将position属性更改为

relative

，并且滚动像往常一样移动，直到到达顶部，然后再次变为

粘滞状态。参考号（）

我的代码看起来像这样

显示“{searchTerm}}”的搜索结果

排序依据


默认值
价格从低到高
价格从高到低

脚本代码[我从这里删除了许多不相关的函数。]

从“Vue”导入Vue
从“../SimpleProductCard.vue”导入SimpleProductCard；
从“/CategorySearchFilters.vue”导入CategorySearchFilters；
从“vue clickaway”导入{mixin as clickaway}；
从“../store/store.vue”导入存储；
从“vuex”导入{MapGetter，mapActions}
从“vue无限滚动”导入{infiniteScroll}
从“gsap”导入gsap，{TimelineLite，CSSPlugin}；
导入“vue resize/dist/vue resize.css”
从“vue resize”导入{ResizeObserver}
从“vue屏幕大小”导入VueScreenSize
从“../../../images/arrow down.svg”以下拉形式导入*；
从“../../../images/Cross_Icon.svg”导入*作为交叉符号；
Vue.component（'resize-observer'，ResizeObserver）
gsap.registerPlugin（CSSPlugin，TimelineLite）；
导出默认值{
商店，
mixins:[单击，VueScreenSize.VueScreenSizeMixin]，
数据：函数（）{
返回{
initCategory:this.mainCat，
ThrottleDisplay:0，
搜索词：“”，
忙碌：是的，
资产：{
下拉：下拉，
交叉标志：交叉标志，
},
selectedSort:'排序依据'，
排序：“”，
索托宾：错，
过滤器化：{
宽度：0，
高度:0,，
},
哈斯克罗德托博通：错，
scrollDir:'向下'，
位置:0,，
最后一位：错，
};
},
名称：'类别搜索'，
道具：['mainCat']，
安装的（）{
const queryString=window.location.search；
const urlParams=新的URLSearchParams（queryString）；
const search_term=urlparms.get（'q'）
this.searchTerm=搜索词；
console.log（this.searchTerm==''）；
console.log（this.searchTerm）；
this.getSearchTerm（搜索项）
this.getMainCategories（this.initCategories）
这个.getProduct（）；
this.scroll（）；
},
创建（）{
window.addEventListener（'scroll'，this.handleScrollMovement）；
},
销毁（）{
window.removeEventListener（'scroll'，this.handleScrollMovement）；
},
组成部分：{
CategorySearchFilters，SimpleProductCard，
},
方法：{
…映射操作({
getProduct:'getProducts'，
getMainCategories:'getMainCategories'，
loadMoreProduct:“loadMoreProduct”，
getLoadMoreProducts:'getLoadMoreProducts'，
setLoadingState:“setLoadingState”，
sortProduct:“sortProduct”，
getSearchTerm:'getSearchTerm'，
}),
卷轴（）{
window.onscroll=（）=>{
让差异=document.documentElement.offsetHeight-（document.documentElement.scrollTop+window.innerHeight）；
如果（差值<280）{
console.log（'Hit Bottom'）
this.handleLoadMoreProduct（）
}
};
},
无手柄旋转运动（）{
if（（document.body.getBoundingClientRect（））.top>this.scrollPos）{
this.scrollDir='up'
这个.handleFilterScroll（）；
}
否则{
this.scrollDir='down'；
这个.handleFilterScroll（）；
}
this.scrollPos=document.body.getBoundingClientRect（）.top；
},
handleFilterScroll（）{
常量{filter}=此。$refs；
//document.documentElement.offsetHeight-（document.documentElement.scrollTop+window.innerHeight）
//log（listing.offsetTop）
//log（listing.offsetTop-document.documentElement.scrollTop）
//console.log（document.documentElement.scrollTop）
如果（this.filterSize.height>=this.$vsheight）{
if（this.scrollDir==='up'）{
//if（this.lastYHeight==false）{
//this.lastYHeight=filter.getBoundingClientRect（）.top；
// }
console.log（this.$refs.filter.getBoundingClientRect（）.top）
console.log（-this.$refs.filter.getBoundingClientRect（）.top+'px'））
const HeightFromTop=-this.$refs.filter.getBoundingClientRect（）.top+'px'；
filter.style.position='relative'；
filter.style.top=从顶部算起的高度；
}否则{
this.lastYHeight=false；
filter.style.position='sticky'；
filter.style.top='-'+（this.filterSize.height-this.vsheight）+'px'；
}
}
},
手洗过滤器