//Directive active view.
app.directive("activeView", function ($window, $rootScope) {
return function(scope, element, attrs) {
angular.element($window).bind("activeView", function() {
//variables condiciales
var y1, y2;
// Variable that gives the scroll position
var scroll = ($(window).scrollTop() || $("body").scrollTop());
//
y1 = $(element).posY();
y2 = $(element).height() + y1;
// Conditions for logo changes
if( scroll >= y1 && scroll < y2 ) {
$rootScope.activeView = attrs.id;
}
console.log(element);
console.log($root.activeView);
console.log(id);
console.log(attrs);
// Don't Remove this element
$rootScope.$apply();
});
};
});`
`<img class="logo" src="img/logo.svg" ng-if="$root.activeView == '#landing' || $root.activeView == 'customers' || $root.activeView == 'page2' || $root.activeView == 'page4' || $root.activeView == 'page12' || $root.activeView == 'page13' || $root.activeView == 'page14' || $root.activeView == 'page20'">
<img class="logo2" src="img/logo_b.svg" ng-if="$root.activeView == 'about' || $root.activeView == 'services' || $root.activeView == 'contact' || $root.activeView == 'page3'">
Añade un comentario
|
2 respuestas
Mediante el evento scroll
.
let scrollable = document.querySelector('.scrollable');
scrollable.addEventListener('scroll', function (e) {
console.log('scrolling');
});
body {
overflow: hidden;
}
.scrollable {
background-color: coral;
height: 300px;
margin: 20px auto;
overflow: auto;
padding: .5rem;
width: 300px;
}
.box {
background-color: turquoise;
height: 1000px;
margin: 0 auto;
width: 70px;
}
<div class="scrollable">
<div class="box"></div>
</div>
Actualización
Respecto a tu comentario:
Necesito saber cuando paso de uno a otro es decir detectar cuando paso en varios elementos
Puedes implementar el patrón Observer
para saber cuándo se scrollea cada elemento. Para mantener las cosas simples, usaré para este ejemplo la micro libería MicroEvent
para implementar este patrón. Puedes hacerlo de manera manual con solo condicionales, pero a mí me gusta más el modelo reactivo. Ya queda a decisión tuya
let scrollables = document.querySelectorAll('.scrollable');
let currentContent = null;
MicroEvent.mixin(Emitter);
let emitter = new Emitter();
/* Escucha por el evento 'scrollChange' */
emitter.bind('scrollChange', function(id) {
console.log(`Se ha cambiado al ememento #${id}`);
});
[].forEach.call(scrollables, function (scrollable) {
scrollable.addEventListener('scroll', function (e) {
let id = scrollable.id
if (!currentContent || currentContent !== id) {
currentContent = id;
emitter.emit(id);
}
});
});
/* Es ecesario crear una función para que funcione MicroEvent */
function Emitter() { };
/* Método encargado de emitir el evento 'scrollChange' */
Emitter.prototype.emit = function (id) {
this.trigger('scrollChange', id);
}
.scrollable {
background-color: coral;
height: 300px;
margin: 20px auto;
overflow: auto;
padding: .5rem;
width: 300px;
}
.box {
background-color: turquoise;
height: 1000px;
margin: 0 auto;
width: 70px;
}
<script src="https://cdn.rawgit.com/jeromeetienne/microevent.js/master/microevent.js"></script>
<div class="scrollable" id="content1">
<div class="box"></div>
</div>
<div class="scrollable" id="content2">
<div class="box"></div>
</div>
<div class="scrollable" id="content3">
<div class="box"></div>
</div>
-
Y si necesito sabes cuando paso de uno a otro es decir detectar cuando paso en varios elementos o varios html en uno solo que yo uso ng-incluide para llamarlos y tenerlos solo uno solo a lo que voy es que necesito saber cuando pasa por cada uno de ellos @Guz Commented el 10 feb. 2017 a las 17:15
-
Debiste poner eso en tu pregunta. Actualizaré mi respuesta.– gugadevCommented el 10 feb. 2017 a las 17:36
-
Otra alternativa a la respuesta de @Guz podrias usar el evento el evento scroll y .target
para conocer que scroll esta siendo utilizado.
let hijos = document.querySelectorAll('.scrollable');
for (hijo of hijos) {
hijo.addEventListener('scroll', function (e) {
console.log('scrolling in ', e.target.id);
});
}
.scrollable {
background-color: black;
height: 300px;
margin: 20px auto;
overflow: auto;
padding: .5rem;
width: 300px;
}
.box {
background-color: orange;
height: 1000px;
margin: 0 auto;
width: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollable" id="content1">
<div class="box"></div>
</div>
<div class="scrollable" id="content2">
<div class="box"></div>
</div>
<div class="scrollable" id="content3">
<div class="box"></div>
</div>
-
El problema es que lo quiero meter en una directiva de angular pero no tengo mucho conocimientos en eso ya entendi como se hace en jquery pero lo quiero en una directiva de angular Commented el 10 feb. 2017 a las 20:43
-
@CarlosVargas en ese caso deberias crear una nueva pregunta, y modificar esta pregunta para que tu respuesta valida sea coherente Commented el 10 feb. 2017 a las 20:46