Estoy tratando de posicionar el cuadro azul
dependiendo del cuadro al que le doy click
, es decir que si le doy click
al cuadro verde, el cuadro azul debe de bajar hasta donde esta el cuadro verde,no puede quedar arriba del todo, debe quedar como si le colocara la propiedad top: 500px;
de css
o algo así.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.showFuncion = function() {
$scope.showDiv = true;
$scope.fafa = !$scope.fafa
}
});
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div style="height: 150px; background-color: red;" ng-click="showFuncion()">
ESTE ES EL LADO DERECHO DE LA PANTALLA
</div>
<div style="height: 150px; background-color: yellow;" ng-click="showFuncion()">
ESTE ES EL LADO DERECHO DE LA PANTALLA
</div>
<div style="height: 150px; background-color: green;" ng-click="showFuncion()">
ESTE ES EL LADO DERECHO DE LA PANTALLA
</div>
<div style="height: 150px; background-color: pink;" ng-click="showFuncion()">
ESTE ES EL LADO DERECHO DE LA PANTALLA
</div>
<div style="height: 150px; background-color: black;" ng-click="showFuncion()">
ESTE ES EL LADO DERECHO DE LA PANTALLA
</div>
</div>
<div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
<div style="height: 150px; background-color: blue;">
ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
</div>
</div>
</div>
</div>
</body>
</html>
Este es el error de offsetTop
que me muestra en 0