Skip to main content
título editado
Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Detectar cuando estoy haciendo scroll sobre un elemetoelemento

mejora del formato del código
Origen Enlace
JuankGlezz
  • 5.6k
  • 10
  • 34
  • 59

//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'">

//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'">

//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'">

//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'">
Origen Enlace

Detectar cuando estoy haciendo scroll sobre un elemeto

//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'">