问题描述
限时送ChatGPT账号..我正在使用 Ionic 框架 并且正在寻找非 jquery 粘性菜单插件，当我发现 <强>ngSticky.
bower 安装 ngSticky
很棒的插件，包含的演示文件显示它运行良好，只需将 sticky 属性添加到您想要粘贴的任何 div.
问题是，由于某种原因，它在我的 <ion-nav-view> 中不起作用.<ion-content> Ionic 框架的一部分.
这是我的演示链接:
http://leongaban/sticky/#/
向下滚动时，灰色标题栏应该会粘住.
如果 HTML 只是在正文中而不是在 ion-nav-view 内部呈现，它确实会坚持下去.
<div class="feed-type">Sticky Header</div><div class="social-filter"><div class="social-latest">推文</div></标题>
<小时>
<ion-nav-view></ion-nav-view><!-- <script src="https://cdnjs.cloudflare/ajax/libs/angular.js/1.4.4/angular.js"></script>--><script src="ionic.bundle.min.js"></script><script src="sticky.min.js"></script><脚本>var app = angular.module('demo', ['离子','黏'])//Ionic 使用使用状态概念的 AngularUI Router//在这里了解更多信息:https://github/angular-ui/ui-router//设置应用程序可以处于的各种状态.//每个状态的控制器都可以在controllers.js中找到.config(function($stateProvider, $urlRouterProvider) {$stateProvider.状态('/'， {网址:/"，templateUrl: "home.html",控制器:'演示控件'});//如果以上状态都不匹配，则使用此作为后备$urlRouterProvider.otherwise('/');}).controller('demoCtrl', function($scope) {//$scope.disableSticking = false;console.log('demoCtrl');});其他人遇到过类似的问题吗?在模板中使用类似的 AngularJS 粘滞菜单插件?
解决方案我将范围缩小到父 div 的 transform: translate3d(0%, 0px, 0px) 样式.这就是防止标题粘住的原因.另一个问题可能解释了为什么会发生这种情况.
评论转换属性将使您的灰色标题保持不变.
<div class="pane" nav-view="active" style="opacity: 1;/* transform: translate3d(0%, 0px, 0px); */"><headerclass="main-header">要删除该属性，您可能需要应用一些其他 CSS 属性来覆盖它(我不知道该怎么做)，或者您可以使用一些在页面加载后运行的 JS 代码动态删除它.
这是我创建的 plunker，以防其他人想要给它一个拍摄.
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/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/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/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.
<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.
这篇关于当在模板中使用粘性指令时，ngSticky 插件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论