如何正确实现滚动到固定的jquery插件作为angularjs指令?

时间:2013-12-28 01:54:48

标签: jquery angularjs plugins scroll angularjs-directive

我是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');
                }
            });
        }
    }
});

目前,只要加载页面,它就会自动固定在页面顶部。我该如何解决这个问题?非常感谢您的帮助!

0 个答案:

没有答案