{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 forever°为你锁心 的问题《ngSticky plugin not working when the sticky direct》','https://www.manongdao.com/q-603865.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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.
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.