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

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply