Question

当我找到 Ionic framework 时，我正在使用ngSticky并正在寻找一个非jquery粘性菜单插件。

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粘性菜单插件？

在模板内部使用sticky指令时，ngSticky插件无法正常工作

0 个答案: