gpt4 book ai didi

css - 用于一堆粘性紧凑元素的 Angular 指令

转载 作者:行者123 更新时间:2023-11-28 12:11:29 26 4
gpt4 key购买 nike

我正在寻找一个好的 Angular Directive(指令),它可以处理粘性元素并在它们离开 View 后向其附加一个紧凑的类...

想象一下网站上的标题元素,其正常高度为 200 像素;...但是当您开始向下滚动时,您首先要使加热器变粘(位置固定 - 顶部:0)但是当您向下滚动时对于超过 200 像素(我猜),你会在它上面附加一个“紧凑”类,所以你会在顶部看到一个压缩版本的标题 - 让我们说 70 像素;。这是现代 [响应式] 网站的既定行为。

这很好,也很容易。问题是当你想在顶部堆叠更多元素时......

所以为了更好地解释我自己......你会得到提到的标题和提到的行为......但是在页面的更下方你会有一个表格,它是 theader 行......你想把它堆叠在顶部,但在标题之后......并且只有当你滚动通过它时......并且还有“COMPACT”行为(但不一定)

并想象您将有一些导航更靠下(例如选项卡)...并且您也想将它们放在顶部,但仅在标题和表格之后...

因此指令需要根据已经卡在那里的元素以及它们是否是自身的紧凑版本来计算固定的顶部位置...

此外,它还应该考虑 (css) 动画位(假设您将在元素的高度上放置一个过渡动画......所以完整到紧凑的过渡是平滑的)

已经有类似的东西了吗?就预期行为而言,我认为这不是什么新东西……所以肯定已经有一些解决方案了。

有人吗?

最佳答案

我知道这是一个较老的话题,但我认为我有一个合适的解决方案。

我是 Angular Sticky 的创造者并且已经实现了这个功能。

您可以查看演示中显示的大部分问题 right here .不过,“集合”演示具有更多类似标题的行为。

然而,需要完成一些智能 CSS 才能使压缩发生,但我认为插件的当前功能应该是可能的。无论如何,我可能也需要对此进行调查,因为我可以想象这可能是一个受欢迎的请求。

关于css - 用于一堆粘性紧凑元素的 Angular 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30619460/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com