我是AngularJS的新手,我目前无法转换 jQuery插件(滚动到固定插件)到AngularJS指令中。 这是我的导航栏的html。在它上面是一个旋转木马。 以下是该插件如何与jQuery一起工作/运行的演示:
http://bigspotteddog.github.io/ScrollToFixed/
<div id="navwrapper" scroll-to-fixed>
<div id="navbar" class="container">
<!-- Navbar Icons: 65 x 65 -->
<div class="row">
<div class="col-md-6">
<img id="hideshow" src="http://placehold.it/65x65" />
<ul id="nav-main">
<li><a href="#home">HOME</a></li>
<li><a href="#shop">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#connect">CONNECT</a></li>
<li><img src="http://placehold.it/65x65" /></li>
</ul>
</div>
<div class="col-md-6">
<ul id="nav-secondary">
<li> <a data-toggle="modal" data-target="#login-modal">Login</a> </li>
<li> <a data-toggle="modal" data-target="#sign-up-modal">Sign Up</a> </li>
<li><img src="http://placehold.it/65x65" /></li>
</ul>
</div>
</div>
</div>
</div>
这是我的指示:
app.directive('scrollToFixed', function(){
return {
restrict: 'A',
link: function(scope, elem, attributes){
console.log("testing scroll to fixed.");
$("#navwrapper").scrollToFixed({
preFixed: function() {
$('#navbar').removeClass('container').hide().fadeIn(300);
$(this).css('opacity', '.95');
},
postFixed: function() {
$('#navbar').addClass('container').hide().fadeIn(300);
$(this).css('opacity', '1');
}
});
}
}
});
目前,只要加载页面,它就会自动固定在页面顶部。我该如何解决这个问题?非常感谢您的帮助!