相关疑难解决方法(0)

当用户将浏览器窗口滚动到某个点以下时,我正在切换#page div的类.

到目前为止我所做的工作正常:

http://jsfiddle.net/eTTZj/29/

<div ng-app="myApp" scroll id="page">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 element.addClass('min');
                 console.log('Scrolled below header.');
             } else {
                 element.removeClass('min');
                 console.log('Header is in view.');
             }
        });
    };
});

(当他们在标题下方滚动窗口时,100px,该类被切换)

虽然,如果我错了,请纠正我,我觉得这不是用Angular做这件事的正确方法.

相反,我认为执行此操作的最佳方法是使用ng-class并在范围中存储布尔值.像这样的东西:

<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) …

我最近在AngularJs建立了一个网站.我还在学习阶段.我希望在页面到达顶部后修复它.我尝试了各种Javascript和Jquery函数.但是,它们似乎没有起作用.

我也尝试过使用Angular UI的ui-scrollfix,但它也无法正常工作.

我正在分享我的代码.这是一个部分页面.请告诉我一种实现上述效果的方法.

<div class="row pdiv">


    <div class="col-md-8 pdiv col-md-offset-2">
        <h3><b>About Us</b></h3>
        <ul class="nav nav-justified">
            <li role="presentation"><a href="" ng-click="scrollTo('weAre')">What are    we?</a></li>
            <li role="presentation"><a href="" ng-click="scrollTo('brandsAssociation')">Brands Associations</a></li>
            <li role="presentation"><a href="" ng-click="scrollTo('knowUs')">Know Us</a></li>
            <li role="presentation"><a href="" ng-click="scrollTo('motto')">Our Motto</a></li>
        </ul>
    </div>

    <div id="weAre" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>What are we?</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

    <div id="brandsAssociation" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>Brands Associations</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

    <div id="knowUs" …

我想在AngularJS指令中实现类似的东西:

https://github.com/geniuscarrier/scrollToTop/blob/master/jquery.scrollToTop.js

这是相当简单的,当你不在页面的顶部时,它将淡入按钮滚动到顶部:

 $(window).scroll(function() {
                if ($(this).scrollTop() > 100) {
                    $this.fadeIn();
                } else {
                    $this.fadeOut();
                }
            });

但是我很难找到如何在Angular中获取当前滚动位置.我宁愿不必仅仅为这件事使用jQuery.

谢谢!