web-dev-qa-db-ja.com

AngularJS Webページでスクロールした後に要素を修正する方法

最近、AngularJsでWebサイトを作成しました。私はまだ学習段階です。ページの要素が最上部に到達した後に修正したいです。あらゆる種類の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>

助けてください...

javascriptjqueryhtmlcssangularjs
21
Anjul Garg

スクロール時にページの最上部にヒットしたときにulを最上部に修正するには、ウィンドウの scrollTop（） がul要素の オフセット top。それが発生すると、ディレクティブは、最上位に修正する要素にクラスを追加するだけです。

したがって、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ハンドラーを1行に減らすこともできます。

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

そして、fix-to-top CSSクラスは次のようなものになります。

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

フィドル です。

52
MikeJ

私は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>
_
17
RebelFist

これを完全なanglejsにするための私の試みです：

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の回答を与えるのをやめてください！または、少なくともタイトルまたは回答要件に明確に示してください;-)

9
hugsbrugs