1

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?

Leon Gaban
  • 36,509
  • 115
  • 332
  • 529

1 Answers1

3

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.

Community
  • 1
  • 1
Alin Pandichi
  • 955
  • 5
  • 15
  • Hmm I don't see the header stick in your plunker. And ok I see what you are saying about the panel scroll. I can't remove that style it seems, it's part of the ionic framework. – Leon Gaban Aug 27 '15 at 14:46
  • It doesn't stick in the plunker until you remove the transform CSS property manually with something like DevTools. I updated the plunker, added `jQuery('.pane').attr("style", "")`, although keep in mind that DOM manipulation in controllers is discouraged in AngularJS. – Alin Pandichi Aug 27 '15 at 15:02
  • Ah I see, thanks! Ok yeah the `transform` style is affecting the directive, I'll have to see how I can remove that overriding style. I may break out that header and place it into a Directive, where I can do some DOM manipulation. – Leon Gaban Aug 27 '15 at 15:06
  • Ah and this is why that `transform` style is added by **Ionic**, for anyone that is interested in knowing why: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela – Leon Gaban Aug 27 '15 at 15:54