如何在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元素的偏移顶部.当发生这种情况时,该指令可以只将一个类添加到将其修复到顶部的元素.

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

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

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

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-topCSS类就是这样的:

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

这是一个小提琴.

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

当天的提示: 请你永远停止给jjery答案提供angularjs标题问题!或者至少在你的标题或答案要求中清楚地表明;-)