AngularJS - Hinzufügen und Entfernen von Klasse zu Element, wenn Div innerhalb der Ansicht ist (Scrollen).

Zunächst einmal hier ist, was ich versuche zu erreichen: http://codepen.io/daveredfern/pen/JKpKjX AngularJS - Hinzufügen und Entfernen von Klasse zu Element, wenn Div innerhalb der Ansicht ist (Scrollen).

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div class="section"> 
     <div class="section__img"> 
      <div class="section__img__inner" style= 
      "background-image: url(http://media.idownloadblog.com/wp-content/uploads/2014/10/iPad-mini-3-silver-side-by-side.png);"> 
      </div> 
     </div> 
     <div class="section__body"> 
      <div class="section__text"> 
       <h2>Section title</h2> 
       <p>Sed dapibus ornare risus vel vehicula. Nunc elit lacus, 
       lacinia vel molestie et, lacinia non augue. Aenean quis iaculis 
       velit. Sed aliquet semper metus quis egestas. Nullam lorem 
       turpis, euismod nec feugiat at, venenatis quis odio. Aenean 
       tellus libero, rutrum in mauris in, suscipit aliquam lacus. 
       Proin ac viverra risus. Vivamus ullamcorper, massa id congue 
       sagittis, erat ipsum aliquet tellus, nec sollicitudin erat 
       risus vitae nisl.</p> 
      </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div class="section__img"> 
      <div class="section__img__inner" style= 
      "background-image: url(http://wpuploads.appadvice.com/wp-content/uploads/2014/12/ipad-c4a63aad52bb1d69495bc2100e5f2026.png);"> 
      </div> 
     </div> 
     <div class="section__body"> 
      <div class="section__text"> 
       <h2>Section title</h2> 
       <p>Sed dapibus ornare risus vel vehicula. Nunc elit lacus, 
       lacinia vel molestie et, lacinia non augue. Aenean quis iaculis 
       velit. Sed aliquet semper metus quis egestas. Nullam lorem 
       turpis, euismod nec feugiat at, venenatis quis odio. Aenean 
       tellus libero, rutrum in mauris in, suscipit aliquam lacus. 
       Proin ac viverra risus. Vivamus ullamcorper, massa id congue 
       sagittis, erat ipsum aliquet tellus, nec sollicitudin erat 
       risus vitae nisl.</p> 
      </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div class="section__img"> 
      <div class="section__img__inner" style= 
      "background-image: url(http://www.consult-pro.com/img/dental-videos-ipad-app.png);"> 
      </div> 
     </div> 
     <div class="section__body"> 
      <div class="section__text"> 
       <h2>Section title</h2> 
       <p>Sed dapibus ornare risus vel vehicula. Nunc elit lacus, 
       lacinia vel molestie et, lacinia non augue. Aenean quis iaculis 
       velit. Sed aliquet semper metus quis egestas. Nullam lorem 
       turpis, euismod nec feugiat at, venenatis quis odio. Aenean 
       tellus libero, rutrum in mauris in, suscipit aliquam lacus. 
       Proin ac viverra risus. Vivamus ullamcorper, massa id congue 
       sagittis, erat ipsum aliquet tellus, nec sollicitudin erat 
       risus vitae nisl.</p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS

html { 
    line-height: 1.618; 
} 

.background { 
    background-color: #ffcd03; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 50%; 
    height: 100vh; 
    z-index: 1; 
} 

.section { 
    display: flex; 
    min-height: 100vh; 
    position: relative; 
    z-index: 2; 

    > * { 
     width: 50%; 
    } 

    &__img { 
     position: relative; 
     display: flex; 

     &__inner { 
      height: 100vh; 
      position: fixed; 
      left: 5%; 
      width: 40%; 
      top: 0; 
      mix-blend-mode: multiply; 
      background-size: contain; 
      background-repeat: no-repeat; 
      background-position: 50% 50%; 
     } 
    } 

    &__body { 
     display: flex; 
     align-items: center; 
    } 

    &__text { 
     padding: 5vw; 
    } 
} 


.section__img__inner { 
    filter: blur(30px); 
    opacity: 0; 
    background-position: 50% 40%; 
    transition: filter .6s ease, opacity .6s ease, background-position 0.8s ease; 
} 

.section.active .section__img__inner { 
    opacity: 1; 
    background-position: 50% 50%; 
    filter: blur(0); 
} 

h2 { 
    font-size: 3vw; 
    margin-bottom: 0.5em; 
    margin-top: 0; 
}

$(window).scroll(function() { 

    // selectors 
    var $window = $(window), 
     $body = $('body'), 
     $panel = $('.section'); 

    var scroll = $window.scrollTop(); 

    $panel.each(function() { 
    var $this = $(this); 

    // if position is within range of this panel. 
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position). 
    // Remember we set the scroll to 33% earlier in scroll var. 
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) { 

     // Remove all classes on body with color- 
     $body.removeClass(function (index, css) { 
     return (css.match (/(^|\s)color-\S+/g) || []).join(' '); 
     }); 

      $('.section').removeClass('active'); 
      $this.addClass('active'); 

    } 
    });  

}).scroll();

Jeder Abschnitt des html hat ein Bild zugeordnet. Ich versuche, ein Bild dynamisch auf der linken Seite des Bildschirms erscheinen, während ich durch den HTML-Körper auf der rechten Seite scrollen. Im obigen Codebeispiel wird jedoch jQuery verwendet und meine App ist eine eckige App, daher versuche ich, sie an eckigen Stilcode anzupassen. Bitte lassen Sie mich wissen, wenn mein Titel unklar ist oder nicht beschreibt, was ich zu erreichen versuche.

(AKTUALISIERT) Dies ist meine Arbeit so weit im Gang Versuch: http://jsfiddle.net/nxhpg7rs/

Haben das $ window.pageYOffset hart codiert, anstatt es zu tun, wie das jQuery Beispiel an der Spitze es tut.

Quelle

2016-07-21 j.castillo

Also ich denke ich habe es !! Lösung: http://jsfiddle.net/sn4qj6Lr/

Hier ist die Js für meine Lösung:

app = angular.module('myApp', []); 

app.directive("scroll", function($window) { 
    var result = document.getElementsByClassName('section'); 
    return function(scope, element, attrs) { 
      angular.element(document.querySelector('#first')).addClass('active'); //Loads the first image by default. 
     angular.element($window).bind("scroll", function() { 
      var scrollHeight = this.pageYOffset + (this.innerHeight/3); 
      for (var i = 0; i < result.length; i++) { 
       var el = angular.element(document.querySelector('#' + result[i].id)); 
       if (el.prop('offsetTop') <= scrollHeight && el.prop('offsetTop') + el.prop('offsetHeight') > scrollHeight) { 
        el.parent().children().removeClass('active'); 
        el.addClass('active'); 
       } 
      } 
     }); 
    }; 
});

Ich brauche eine ID zu jedem Abschnitt in der HTML hinzuzufügen Lage zu sein, das Element, um es mit Bezug zu identifizieren und nutzen .prop(), .addClass(), .removeClass() usw. Nicht sicher, ob es eine Problemumgehung gibt, bei der jeder "Abschnitt" keine eigene eindeutige ID haben muss. Wenn es ist, würden irgendwelche Vorschläge noch sehr geschätzt werden!

Quelle

2016-07-21 21:04:22

AngularJS - Hinzufügen und Entfernen von Klasse zu Element, wenn Div innerhalb der Ansicht ist (Scrollen).

Antwort

Verwandte Themen