web-dev-qa-db-fra.com

Comment réparer un élément après le défilement dans une page Web AngularJS

J'ai récemment créé un site Web dans AngularJs. Je suis encore en phase d'apprentissage. Je souhaite corriger un élément sur une page après qu'il ait atteint le sommet. J'ai essayé toutes sortes de fonctions Javascript et Jquery. Cependant, ils ne semblent pas fonctionner.

J'ai également essayé d'utiliser Angular Ui-scrollfix de l'interface utilisateur, mais cela ne fonctionne pas non plus.

Je partage mon code. Il s'agit d'une page partielle. Veuillez me conseiller une méthode pour obtenir l'effet mentionné ci-dessus.

<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>

J'ai besoin de corriger la classe ul .nav .nav-justifiée après avoir atteint le haut de la page.

J'utilise bootstrap.

voici les dépendances 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>

Veuillez aider ...

javascriptjqueryhtmlcssangularjs
21
Anjul Garg

Pour corriger votre ul en haut lorsqu'il atteint le haut de la page lors du défilement, vous pouvez lui mettre une directive qui vérifie la fenêtre scrollTop () dépassant le ul l'élément offset en haut. Lorsque cela se produit, la directive peut simplement ajouter une classe à l'élément qui la fixe en haut.

Ainsi, votre balisage ul ressemblerait à ceci, avec la nouvelle directive set-class-when-at-top dessus:

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

Cette directive ajouterait la classe CSS fix-to-top à l'élément lorsque l'élément atteint le haut de la page. La définition de la directive ressemblerait à ceci:

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);
        }
      });
    }
  };
});

Si vous voulez devenir un peu effronté, vous pouvez même réduire votre gestionnaire scroll à une seule ligne:

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

Et le fix-to-top La classe CSS serait juste quelque chose comme ceci:

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

Voici un violon .

52
MikeJ

J'ai commencé à utiliser l'excellente réponse de MikeJ pour commencer, mais j'ai rapidement réalisé quelques lacunes:

  1. N'a pas tenu compte du moment où le contenu au-dessus de l'élément change dynamiquement après la première analyse de la directive
  2. Le contenu sous l'élément fixe a augmenté de la hauteur de l'élément lorsqu'il est devenu fixe et a été supprimé du flux de documents normal
  3. Si cet élément est corrigé en dessous de quelque chose d'autre (comme un menu supérieur), vous pouvez avoir du mal à calculer le bon endroit; vous devez le corriger avant que le offset top soit passé là où se trouve la $win.scrollTop(), afin qu'il ne disparaisse pas derrière ce menu, puis soit réparé après.

Pour résoudre ces problèmes, j'ai proposé une version modifiée:

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);
                }
            });
        }
    };
}

Cela nécessite que l'élément que vous corrigez soit encapsulé dans un parent vide qui ne contient que l'élément à corriger. Il s'agit à la fois de savoir où se trouvait le décalage d'origine de l'élément (pour le remettre dans le flux de documents) et d'avoir la hauteur de l'élément d'origine pour conserver le flux de documents tel qu'il était. De plus, passez un attribut pour paddingWhenAtTop pour le corriger plus tôt (ou plus tard si vous le souhaitez).

L'utilisation dans le HTML change comme ceci:

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

Voici ma tentative pour le rendre complètement angulaire:

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"> 
...

Modifications principales pour ignorer jquery:

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

Astuce du jour: Pourriez-vous s'il vous plaît arrêter de toujours donner des réponses de questions jquery angularjs title! Ou du moins l'indiquez clairement dans votre titre ou dans vos réponses ;-)

9
hugsbrugs