ngSticky plugin not working when the sticky directive is used inside of a template

问题

I'm using the Ionic framework and was looking for a non-jquery sticky menu plugin, when I found ngSticky.

bower install ngSticky

Great plugin, the demo file included shows it working great, just add the sticky attribute to whatever div you want stickfied.

Problem is, for some reason it's not working inside of my <ion-nav-view> <ion-content> part of the Ionic framework.

Here is my demo link:
http://leongaban.com/sticky/#/
When you scroll down, the gray header bar should stick.

It does stick if the HTML is just in the body and not rendered inside of the 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>

Anyone else run into a similar problem? Use a similar AngularJS sticky menu plugin in a template?

回答1:

I narrowed it down to the transform: translate3d(0%, 0px, 0px) style of the parent div. That's what preventing the header to stick. This other question might explain why this happens.

Commenting the transform propery will make your gray header stick.

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

To remove that property, you might need to apply some other CSS properties to override that (I don't know how to do that), or you could dynamically remove it with some JS code that runs after the page loads.

Here is a plunker I created, in case others want to give it a shot.

来源：https://stackoverflow.com/questions/32237459/ngsticky-plugin-not-working-when-the-sticky-directive-is-used-inside-of-a-templa

标签

javascript

angularjs

angularjs-directive

ionic-framework

ionic