一堆粘性紧凑元素的Angular指令

时间:2015-06-03 11:56:58

标签: css angularjs sticky

我正在寻找一个好的角度指令,它可以处理粘性元素,并在它们离开视图后附加一个紧凑类...

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

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

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

并且想象一下你会进一步向下导航(例如标签)......你也想把它们放在顶部,但只能在标题和表格之后......

所以该指令需要根据已经卡在那里的元素计算固定的顶部位置,如果它们本身就是一个紧凑版本......

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

那里有类似的东西吗?我不认为这在预期行为方面是新的......因此必须有一些解决方案。

2 个答案:

答案 0 :(得分:1)

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

我是Angular Sticky的创建者,已经实现了此功能。

您可以查看演示,其中包含您提出的大部分内容right here。 "收藏"虽然演示有更多的标题行为。

然而,有一些智能CSS需要完成以实现压缩,但我认为应该可以使用插件的当前功能。我可能还需要对此进行调查,因为我可以想象它可能是一个受欢迎的请求。

答案 1 :(得分:0)

ng-sticky可以用一点mod。

它有一个body粘性类,因此您可以在元素变粘后更改整个页面的行为。

UPD1

正如我之前所述,ngSticky的一些更新可以解决问题。

所以我决定做这些改变 这是我Github

上的词汇分支

它仍然是WIP,我打算在完成后将其贡献给主要的ngSticky项目。 但在此之前(并继续我的工作)我想与你核实这是否是你期望的行为。

任何回复都会有所帮助。