如果上的div元素下 - 設置類「不可見」

我事業部在首頁（300像素高），項目與NG-重複。如果元素「Hello World」部分或全部隱藏在頂部div下，我需要設置「no_visible」類（每個span元素）。我怎麼能做到這一點？如果上的div元素下 - 設置類「不可見」

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

 
app 
 
.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.items = []; 
 
    for(var i =0; i<100;i++){ 
 
    $scope.items.push(i); 
 
    } 
 
}) 
 
.directive('trackVisibility', function(){ 
 
    function isVisible(el) { 
 
    var rect = el.getBoundingClientRect(); 
 
    var clw = (window.innerWidth || document.documentElement.clientWidth); 
 
    var clh = (window.innerHeight || document.documentElement.clientHeight) ; 
 

 
    // checks if element is fully visible 
 
    //return (rect.top >= 0 && rect.bottom <= clh) && (rect.left >= 0 && rect.right <= clw); 
 

 
    // checks if part of element is visible 
 
    return (rect.left <= clw && 0 <= rect.right && rect.top <= clh && 0 <= rect.bottom); 
 

 
    } 
 
    var reg = []; 
 

 
    function register(element, fn) { 
 
    reg.push([element, fn]); 
 
    } 
 

 
    function deregister(element) { 
 
    reg = angular.filter(reg, function (item) { 
 
     return item[0] !== element; 
 
    }); 
 
    } 
 

 
    angular.element(window).on('DOMContentLoaded load resize scroll', function() { 
 
    angular.forEach(reg, function (item) { 
 
     item[1](isVisible(item[0])); 
 
    }); 
 
    }); 
 

 
    
 
    return { 
 
    restrict: 'A', 
 
    link: function (scope, element, attrs, controller) { 
 
     register(element[0], function(isVisible){ 
 
     scope.$apply(function(){ 
 
      scope.isVisible = isVisible; 
 
     }) 
 
     }); 
 
     scope.$on('$destroy', function(){ 
 
     deregister(element); 
 
     }) 
 
    } 
 
    }; 
 
});

span { 
 
display: block; 
 
height: 30px; 
 
border: 1px solid; 
 
}

<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.16"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    
 
    <div style="height:300px; width:300px; position: fixed; background: #000;"> 
 
    </div> 
 
    
 
    <div style="margin-top:350px; position: absolute;"> 
 
    <span style="float:left; clear: both; " ng-repeat="i in items" track-visibility>Hello {{name}} {{isVisible?'yes':'no'}}!</span> 
 
    </div> 
 
    
 
    
 
    </body> 
 

 
</html>

來源

2015-06-23 trigger

設置在一個容器中的元素，設置這個容器中'溢出：hidden' – gr3g

不用了，謝謝。我需要爲每個元素添加類，部分或全部位於上部div下。 – trigger

(function(){ 

angular.module('app') 

//Each element has to be called "my-element" 
.directive('myElement', function(){ 

    return { 

    restrict : 'E', 
    link : function(scope, element, attrs){ 

     //probably need to perfom this action on a event listener 

     window.on('scroll', function(){ 
      var top = $el.getBoundingClientRect().top; 
      if(top < 200){ 
       //Hide me 
       element.hide(); 
      } 
     } 


    } 
    }; 

}); 
})();

來源

2015-06-23 14:48:08 gr3g

thx，但它沒有爲我工作（ – trigger

是的，實際上，這個window.onScroll事件應該聽一個更高的控制器，但我不明白你爲什麼不使用'overflow：hidden'。在移動瀏覽器，IE瀏覽器，.... – gr3g

因爲我只顯示我的所有代碼的簡化結構，實際上而不是每個跨度我有複雜的層次結構的div，如果父div部分隱藏在頁面上方的div上面，我需要爲此層次結構的子div設置「不可見」類。 – trigger

如果上的div元素下 - 設置類「不可見」

回答

相關問題