javascript - 在 AngularJS 网页中滚动后如何修复元素

Question

我最近用 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" class="col-md-8 pdiv col-md-offset-2">
    <br>
    <h4><b>Know Us</b></h4>
    <p>Some content goes here.</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>

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

</div>


<a href="" ng-click="scrollTo('header')"><span id="toTop" class="glyphicon glyphicon-chevron-up"></span></a>

我需要在它到达页面顶部后修复 ul 类 .nav .nav-justified。

我正在使用 Bootstrap 。

这里是 javascript 依赖项。

<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

请帮忙...

Answer 1

要将 ul 固定到滚动页面顶部时的顶部，您可以在其上放置一个指令来检查窗口的 scrollTop()。超过 ul 元素的 offset最佳。当发生这种情况时，指令可以只向元素添加一个类，将其固定到顶部。

所以你的 ul 标记看起来像这样，上面有新指令 set-class-when-at-top:

<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">

当元素到达页面顶部时，该指令会将 CSS 类 fix-to-top 添加到该元素。指令定义如下所示:

app.directive('setClassWhenAtTop', function ($window) {
  var $win = angular.element($window); // wrap window object as jQuery object

  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
          offsetTop = element.offset().top; // get element's offset top relative to document

      $win.on('scroll', function (e) {
        if ($win.scrollTop() >= offsetTop) {
          element.addClass(topClass);
        } else {
          element.removeClass(topClass);
        }
      });
    }
  };
});

如果你想变得有点厚颜无耻，你甚至可以将你的 scroll 处理程序减少到只有一行:

$win.on('scroll', function (e) {
  element[($win.scrollTop() >= offsetTop) ? 'addClass' : 'removeClass'](topClass);
});

fix-to-top CSS 类就是这样的:

.fix-to-top {
  position: fixed;
  top: 0;
}

这是一个 fiddle .