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

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

这是一个有效的例子：https://plnkr.co/edit/HnBM2P5H7D2LPYt7uXve?p=preview

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

Answer 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

Angular-snap不与ngSticky一起工作

2 个答案: