当在模板中使用粘滞指令时，ngSticky 插件不起作用答案

【问题标题】：ngSticky plugin not working when the sticky directive is used inside of a template当在模板中使用粘滞指令时，ngSticky 插件不起作用
【发布时间】：2015-11-21 03:10:49
【问题描述】：

我正在使用Ionic framework 并正在寻找非jquery 粘性菜单插件，这时我发现了ngSticky。

bower install ngSticky

很棒的插件，包含的演示文件显示它运行良好，只需将sticky 属性添加到您想要粘贴的任何 div 中。

问题是，由于某种原因，它无法在 Ionic framework 的我的 <ion-nav-view> <ion-content> 部分内工作。

这是我的演示链接：
http://leongaban.com/sticky/#/
当你向下滚动时，灰色的标题栏应该会粘住。

如果 HTML 只是在正文中而不是在 ion-nav-view 内呈现，它确实会保留。

<header class="social-media-header" sticky>
    <div class="feed-type">Sticky Header</div>
    <div class="social-filter">
        <div class="social-latest">Tweets</div>
    </div>
</header>

<body ng-app="demo" ng-controller="demoCtrl">

    <ion-nav-view></ion-nav-view>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script> -->
    <script src="ionic.bundle.min.js"></script>
    <script src="sticky.min.js"></script>
    <script>
        var app = angular.module('demo', [
            'ionic',
            'sticky'])

        // Ionic uses AngularUI Router which uses the concept of states
        // Learn more here: https://github.com/angular-ui/ui-router
        // Set up the various states which the app can be in.
        // Each state's controller can be found in controllers.js
        .config(function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('/', {
                    url: "/",
                    templateUrl: "home.html",
                    controller: 'demoCtrl'
                });

                // if none of the above states are matched, use this as the fallback
                $urlRouterProvider.otherwise('/');
        })
        .controller('demoCtrl', function($scope) {
            // $scope.disableSticking = false;
            console.log('demoCtrl');
        });
    </script>
</body>

还有其他人遇到过类似的问题吗？在模板中使用类似的 AngularJS 粘性菜单插件？

【问题讨论】：

标签： javascript angularjs angularjs-directive ionic-framework ionic

【解决方案1】：

我将其缩小到父 div 的 transform: translate3d(0%, 0px, 0px) 样式。这就是防止标题粘住的原因。另一个question 可能会解释为什么会发生这种情况。

评论转换属性将使您的灰色标题保持不变。

<div class="pane" nav-view="active" style="opacity: 1; /* transform: translate3d(0%, 0px, 0px); */"><header class="main-header">

要删除该属性，您可能需要应用一些其他 CSS 属性来覆盖它（我不知道该怎么做），或者您可以使用页面加载后运行的一些 JS 代码动态删除它。

这是我创建的plunker，以防其他人想试一试。

【讨论】：

嗯，我在你的 plunker 中没有看到标题棒。好的，我明白您对面板滚动的看法。我似乎无法删除那种风格，它是离子框架的一部分。
在您使用 DevTools 之类的工具手动删除转换 CSS 属性之前，它不会粘在 plunker 中。我更新了 plunker，添加了 jQuery('.pane').attr("style", "")，但请记住，AngularJS 不鼓励控制器中的 DOM 操作。
啊，我明白了，谢谢！好的，是的，transform 样式正在影响指令，我将不得不看看如何删除该覆盖样式。我可能会拆分该标题并将其放入一个指令中，在那里我可以进行一些 DOM 操作。
啊，这就是 Ionic 添加 transform 样式的原因，对于任何有兴趣了解原因的人：stackoverflow.com/questions/9807620/…