如何在 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 到达页面顶部后对其进行修复。

我正在使用引导程序。

这里是 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。

Answer 2

我开始使用 MikeJ 的最佳答案开始，但很快意识到一些缺点：

1. 在首次解析指令后，没有考虑元素上方的内容何时动态变化
2. 固定元素下方的内容在元素固定后向上移动，并从正常文档流中移除
3. 如果这个元素被固定在其他东西下面（比如顶部菜单），你可能会在计算正确的位置时遇到一些麻烦；您需要在 offset top 超过 $win.scrollTop() 之前修复它，这样它就不会消失在该菜单后面，然后再修复。

为了解决这些问题，我想出了一个修改版本：

function setClassWhenAtTop($window) {
    var $win = angular.element($window);

    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var topClass = attrs.setClassWhenAtTop,
                topPadding = parseInt(attrs.paddingWhenAtTop, 10),
                parent = element.parent(),
                offsetTop;

            $win.on("scroll", function () {
                // dynamic page layout so have to recalculate every time;
                // take offset of parent because after the element gets fixed
                // it now has a different offset from the top
                offsetTop = parent.offset().top - topPadding;
                if ($win.scrollTop() >= offsetTop) {
                    element.addClass(topClass);
                    parent.height(element.height());
                } else {
                    element.removeClass(topClass);
                    parent.css("height", null);
                }
            });
        }
    };
}

这需要将您要修复的元素包装在一个空父级中，该父级仅包含要修复的元素。这是为了处理既知道元素的原始偏移量在哪里（将其放回文档流中），又要处理原始元素的高度以保持文档流原样。此外，为paddingWhenAtTop 传递一个属性，以便尽快修复它（如果需要，也可以稍后修复）。

在 HTML 中的使用变化如下：

<div>
  <ul class="nav nav-justified" set-class-when-at-top="fix-to-top" padding-when-at-top="50">
</div>

Answer 3

这是我尝试使其完整的 angularjs ：

JS

.directive('setClassWhenAtTop', ['$window', 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
                topPadding = parseInt(attrs.paddingWhenAtTop, 10),
                offsetTop = element.prop('offsetTop'); // get element's offset top relative to document

            $win.on('scroll', function (e) {
                if ($window.pageYOffset + topPadding >= offsetTop) {
                    element.addClass(topClass);
                } else {
                    element.removeClass(topClass);
                }
            });
        }
    };
}])

CSS

.fix-to-top {
    position: fixed;
    top: 55px;
    height: 50px;
    z-index: 999;
    width: 100%;
}

HTML

<div class="navigation-bar" set-class-when-at-top="fix-to-top" padding-when-at-top="55"> 
...

跳过 jquery 的主要更改：

parent.offset().top => element.prop('offsetTop')
$win.scrollTop() => $window.pageYOffset

每日提示： 请不要总是给 angularjs 标题问题 jquery 答案！或者至少在你的标题或你的回答要求中清楚地表明它;-)