Angular-snap 不能与 ngSticky 一起使用答案

【问题标题】：Angular-snap doesn't work together with ngStickyAngular-snap 不能与 ngSticky 一起使用
【发布时间】：2016-05-30 14:13:03
【问题描述】：

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

我准备了两个例子：

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

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

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

【问题讨论】：

标签： css angularjs sticky snap.js

【解决方案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，如果我理解正确，这就是它不起作用的原因。 Angular-Snap 导致window 被展开。然后我做了一个简单的计算，找出这个元素应该从顶部接收哪个offset，然后设置这个值。当然，在最终版本中，所有参数都将以 Angular 方式 传递。

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

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

【讨论】：

【解决方案2】：

Angular-Snap 的作者在这里为这个问题提供了解决方案：https://github.com/jtrussell/angular-snap.js/issues/113 你应该使用：

angular-snap-only.css - 来自这个 repo
snap.css - 来自 Snap.js 回购

再次，请看这里的详细解释：https://github.com/jtrussell/angular-snap.js/issues/113

【讨论】：