css - Angular-snap 不能与 ngSticky 一起使用

Question

尝试一起使用Angular-Snap与 ngSticky但它不起作用，应该保持粘性的面板正在滚动。

我准备了两个例子:

• 不起作用的 Angular-Snap 示例:https://plnkr.co/edit/ARhUti3jJCEjB8sLL5q0?p=preview
• 没有 Angular-Snap 而有效的例子: https://plnkr.co/edit/QJSQelcdUP2AamFBuNiH?p=preview

您可以在这两个示例中展开 Accordion 面板并尝试滚动以查看差异。实际上，我已经尝试了多种解决方案来使元素成为粘性，但没有人使用过 Angular-Snap

如果我在 1st 中删除，非工作示例 angular-snap.css 文件它开始工作，但显然我需要它.我无法进一步调试此问题，因此我们将不胜感激。

Answer 1

实际上我找到了解决方法 :) 我在微笑，因为这不是我第一次在发布问题后不久就自己找到解决方案。

我创建了以下指令:

.directive("stickyElement", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            console.log("scrolled");
        });

        $(".snap-content").bind("scroll", function(event){
            var scrolledUp = $(".snap-content").scrollTop();
            console.log("from top: " + scrolledUp);
            var offset = 50 - scrolledUp > 0 ? 50 - scrolledUp : 0; 
            $(element[0]).offset({top: offset});

        })
    };
});

首先，它检测到 .snap-content 元素的滚动，而不是 window ，它保持 unscrolled，如果我理解正确的话，这就是原因为什么它不起作用。 Angular-Snap 导致 window 取消滚动。然后我做了一个简单的计算，找出这个元素应该从顶部接收到哪个 offset，然后设置这个值。当然，在最终版本中，所有参数都将以 Angular 方式 传递。

这是工作示例:https://plnkr.co/edit/HnBM2P5H7D2LPYt7uXve?p=preview

P.S. 尽管它在工作，但我觉得它是一个有点hackish 的解决方案，因为我的指令绑定(bind)到不相关的元素 .snap-内容。因此，如果有人能提供更漂亮的解决方案，我会接受。