pablinhob/gist:91692353982f9c5e95126bdf1b850814

## gistfile1.txt
<html>
  <head>
    <title>Exemplo frame</title>
    <style>
      body {
        padding:0;
        margin:0;
      }
      header {
        width:100%;
        height:40px;
        background-color:red;
        position: fixed;
        top:0;
      }
    </style>
  </head>
  <body >

    <header>  </header>

    <img src="https://turismo.ribeirasacra.org/cgmlImg/470-areiixn/imgCollections/Vistas_Canon_Sil.jpg" style="float:left;margin-right:10px;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at fermentum eros. Curabitur luctus augue sit amet eros dictum, ac congue orci sodales. In ornare velit et sem egestas feugiat. Curabitur ante libero, tincidunt a lectus a, sagittis vulputate libero. Aenean auctor at tortor eget auctor. Aliquam augue orci, varius sed mi eu, bibendum viverra nibh. Fusce quis mi metus. Nam sit amet erat a nulla vehicula interdum. Aenean malesuada dolor at mauris finibus congue. Nam ut posuere urna.</p>
    <p>Etiam quis posuere purus, a faucibus odio. Quisque tincidunt, turpis eget facilisis iaculis, mi ex ornare velit, tristique vulputate ligula lacus ac dolor. Maecenas tempor consectetur lacus ac pretium. Nullam ultricies imperdiet massa in egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus posuere lacus vitae consectetur. Aliquam tempor condimentum massa, a blandit mauris mollis vel. In vitae purus consectetur, pharetra augue nec, mattis lorem. Vivamus tellus nisl, dignissim at lacus convallis, mollis tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales est quis mi efficitur lacinia. Phasellus dolor lorem, scelerisque a eros quis, ullamcorper convallis ipsum. Nulla facilisi. Phasellus pharetra, quam tincidunt semper faucibus, lorem eros feugiat erat, nec facilisis neque quam vel eros. Pellentesque tempus mi blandit erat ultrices, quis varius nisl feugiat.</p>
    <p>Duis quis rutrum sapien, at condimentum risus. Aenean sed nisi ac velit pretium luctus. Curabitur et leo ac sapien viverra bibendum vitae et justo. Aenean eu maximus arcu. Fusce tempor, enim in cursus fringilla, massa lorem euismod quam, quis tempor leo ex vitae massa. Proin tincidunt quam sed erat bibendum auctor. Integer placerat lacinia molestie. Proin a erat erat. Praesent ut diam vitae felis tristique semper ornare et risus. Nunc vulputate magna quis leo elementum vehicula. Vestibulum elit dui, malesuada at ullamcorper tempus, eleifend non risus.</p>
    <p>Mauris nisl diam, vestibulum et mi eget, dapibus lobortis lorem. Quisque ornare tincidunt faucibus. Etiam pretium nisi at dignissim condimentum. Donec venenatis, neque auctor maximus volutpat, turpis tellus dapibus lacus, ac suscipit lorem lectus ac elit. In quis libero lacinia, mattis augue vel, ullamcorper lorem. Integer finibus ac diam vel maximus. Duis a ultricies ex.</p>
    <p>Fusce eu eros quis dui commodo congue. Maecenas a sodales lectus, pulvinar cursus ligula. Nunc tempor lectus efficitur semper congue. Vestibulum vel nunc vestibulum, dictum tortor eu, tristique urna. Vivamus fringilla imperdiet velit vel lacinia. Nam sagittis sapien lacinia, fermentum odio a, tincidunt ante. Quisque nec mauris sit amet eros imperdiet sodales nec non eros. Nunc mollis vestibulum auctor. Nam quis accumsan est, a egestas arcu. Etiam at ultrices ex. </p>

    <img src="https://turismo.ribeirasacra.org/cgmlImg/5452-apbpaqb/imgCollections/Esgrafiados_na_Ribeira_Sacra.png" style="float:right;margin-left:10px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at fermentum eros. Curabitur luctus augue sit amet eros dictum, ac congue orci sodales. In ornare velit et sem egestas feugiat. Curabitur ante libero, tincidunt a lectus a, sagittis vulputate libero. Aenean auctor at tortor eget auctor. Aliquam augue orci, varius sed mi eu, bibendum viverra nibh. Fusce quis mi metus. Nam sit amet erat a nulla vehicula interdum. Aenean malesuada dolor at mauris finibus congue. Nam ut posuere urna.</p>
    <p>Etiam quis posuere purus, a faucibus odio. Quisque tincidunt, turpis eget facilisis iaculis, mi ex ornare velit, tristique vulputate ligula lacus ac dolor. Maecenas tempor consectetur lacus ac pretium. Nullam ultricies imperdiet massa in egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus posuere lacus vitae consectetur. Aliquam tempor condimentum massa, a blandit mauris mollis vel. In vitae purus consectetur, pharetra augue nec, mattis lorem. Vivamus tellus nisl, dignissim at lacus convallis, mollis tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales est quis mi efficitur lacinia. Phasellus dolor lorem, scelerisque a eros quis, ullamcorper convallis ipsum. Nulla facilisi. Phasellus pharetra, quam tincidunt semper faucibus, lorem eros feugiat erat, nec facilisis neque quam vel eros. Pellentesque tempus mi blandit erat ultrices, quis varius nisl feugiat.</p>
    <p>Duis quis rutrum sapien, at condimentum risus. Aenean sed nisi ac velit pretium luctus. Curabitur et leo ac sapien viverra bibendum vitae et justo. Aenean eu maximus arcu. Fusce tempor, enim in cursus fringilla, massa lorem euismod quam, quis tempor leo ex vitae massa. Proin tincidunt quam sed erat bibendum auctor. Integer placerat lacinia molestie. Proin a erat erat. Praesent ut diam vitae felis tristique semper ornare et risus. Nunc vulputate magna quis leo elementum vehicula. Vestibulum elit dui, malesuada at ullamcorper tempus, eleifend non risus.</p>
    <p>Mauris nisl diam, vestibulum et mi eget, dapibus lobortis lorem. Quisque ornare tincidunt faucibus. Etiam pretium nisi at dignissim condimentum. Donec venenatis, neque auctor maximus volutpat, turpis tellus dapibus lacus, ac suscipit lorem lectus ac elit. In quis libero lacinia, mattis augue vel, ullamcorper lorem. Integer finibus ac diam vel maximus. Duis a ultricies ex.</p>
    <p>Fusce eu eros quis dui commodo congue. Maecenas a sodales lectus, pulvinar cursus ligula. Nunc tempor lectus efficitur semper congue. Vestibulum vel nunc vestibulum, dictum tortor eu, tristique urna. Vivamus fringilla imperdiet velit vel lacinia. Nam sagittis sapien lacinia, fermentum odio a, tincidunt ante. Quisque nec mauris sit amet eros imperdiet sodales nec non eros. Nunc mollis vestibulum auctor. Nam quis accumsan est, a egestas arcu. Etiam at ultrices ex. </p>


    <snippet>

      <script>
        document.addEventListener("DOMContentLoaded", function(event) {

          var headerHeight = 40;
          var geozzyExplorerFrame = document.getElementById("geozzyExplorerFrame");
          var geozzyCurtain = document.getElementById("geozzyCurtain");
          var geozzyTakemeout = document.getElementById("geozzyTakemeout");

          // iframe dimensions
          document.body.style.overflowX ='hidden';
          geozzyExplorerFrame.style.width = '100%';
          geozzyExplorerFrame.style.height= window.innerHeight-40;

          // curtain dimensions
          geozzyCurtain.style.width = geozzyExplorerFrame.style.width;
          geozzyCurtain.style.height = geozzyExplorerFrame.style.height;
          geozzyCurtain.style.position = 'absolute';
          geozzyCurtain.style.zIndex = geozzyExplorerFrame.style.zIndex + 1;
          geozzyCurtain.style.backgroundColor = "white";
          geozzyCurtain.style.opacity = "0.5";

          // take me out button
          geozzyTakemeout.style.height = 20;
          geozzyTakemeout.style.right = 20;
          geozzyTakemeout.style.bottom = 20;
          geozzyTakemeout.style.padding = 20;
          geozzyTakemeout.style.cursor = "pointer";
          geozzyTakemeout.style.backgroundColor = "green";
          geozzyTakemeout.style.zIndex = geozzyCurtain.style.zIndex + 1;
          geozzyTakemeout.style.position = 'fixed';

          geozzyTakemeout.addEventListener("click", function(){

            window.scrollTo(0, geozzyExplorerFrame.offsetTop-200);

          });

          // the scroll event
          window.addEventListener('scroll', function(e) {
            var iframeViewportOffset = geozzyExplorerFrame.getBoundingClientRect();
          // these are relative to the viewport, i.e. the window
            if( iframeViewportOffset.top > headerHeight ) {
              geozzyCurtain.style.display = "block";
              geozzyTakemeout.style.display = "none";
            }
            else {
              geozzyCurtain.style.display = "none";
              geozzyTakemeout.style.display = "block";
            }
          });

        });
      </script>
      <div id="geozzyCurtain"></div>
      <div id="geozzyTakemeout">SÁCAME!!</div>
      <iframe id="geozzyExplorerFrame" src="https://turismo.ribeirasacra.org/es/mapas-interactivos" ></iframe>

    </snippet>

  </body>
</html>
	<html>
	<head>
	<title>Exemplo frame</title>
	<style>
	body {
	padding:0;
	margin:0;
	}
	header {
	width:100%;
	height:40px;
	background-color:red;
	position: fixed;
	top:0;
	}
	</style>
	</head>
	<body >

	<header> </header>

	<img src="https://turismo.ribeirasacra.org/cgmlImg/470-areiixn/imgCollections/Vistas_Canon_Sil.jpg" style="float:left;margin-right:10px;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at fermentum eros. Curabitur luctus augue sit amet eros dictum, ac congue orci sodales. In ornare velit et sem egestas feugiat. Curabitur ante libero, tincidunt a lectus a, sagittis vulputate libero. Aenean auctor at tortor eget auctor. Aliquam augue orci, varius sed mi eu, bibendum viverra nibh. Fusce quis mi metus. Nam sit amet erat a nulla vehicula interdum. Aenean malesuada dolor at mauris finibus congue. Nam ut posuere urna.</p>
	<p>Etiam quis posuere purus, a faucibus odio. Quisque tincidunt, turpis eget facilisis iaculis, mi ex ornare velit, tristique vulputate ligula lacus ac dolor. Maecenas tempor consectetur lacus ac pretium. Nullam ultricies imperdiet massa in egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus posuere lacus vitae consectetur. Aliquam tempor condimentum massa, a blandit mauris mollis vel. In vitae purus consectetur, pharetra augue nec, mattis lorem. Vivamus tellus nisl, dignissim at lacus convallis, mollis tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales est quis mi efficitur lacinia. Phasellus dolor lorem, scelerisque a eros quis, ullamcorper convallis ipsum. Nulla facilisi. Phasellus pharetra, quam tincidunt semper faucibus, lorem eros feugiat erat, nec facilisis neque quam vel eros. Pellentesque tempus mi blandit erat ultrices, quis varius nisl feugiat.</p>
	<p>Duis quis rutrum sapien, at condimentum risus. Aenean sed nisi ac velit pretium luctus. Curabitur et leo ac sapien viverra bibendum vitae et justo. Aenean eu maximus arcu. Fusce tempor, enim in cursus fringilla, massa lorem euismod quam, quis tempor leo ex vitae massa. Proin tincidunt quam sed erat bibendum auctor. Integer placerat lacinia molestie. Proin a erat erat. Praesent ut diam vitae felis tristique semper ornare et risus. Nunc vulputate magna quis leo elementum vehicula. Vestibulum elit dui, malesuada at ullamcorper tempus, eleifend non risus.</p>
	<p>Mauris nisl diam, vestibulum et mi eget, dapibus lobortis lorem. Quisque ornare tincidunt faucibus. Etiam pretium nisi at dignissim condimentum. Donec venenatis, neque auctor maximus volutpat, turpis tellus dapibus lacus, ac suscipit lorem lectus ac elit. In quis libero lacinia, mattis augue vel, ullamcorper lorem. Integer finibus ac diam vel maximus. Duis a ultricies ex.</p>
	<p>Fusce eu eros quis dui commodo congue. Maecenas a sodales lectus, pulvinar cursus ligula. Nunc tempor lectus efficitur semper congue. Vestibulum vel nunc vestibulum, dictum tortor eu, tristique urna. Vivamus fringilla imperdiet velit vel lacinia. Nam sagittis sapien lacinia, fermentum odio a, tincidunt ante. Quisque nec mauris sit amet eros imperdiet sodales nec non eros. Nunc mollis vestibulum auctor. Nam quis accumsan est, a egestas arcu. Etiam at ultrices ex. </p>

	<img src="https://turismo.ribeirasacra.org/cgmlImg/5452-apbpaqb/imgCollections/Esgrafiados_na_Ribeira_Sacra.png" style="float:right;margin-left:10px;">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at fermentum eros. Curabitur luctus augue sit amet eros dictum, ac congue orci sodales. In ornare velit et sem egestas feugiat. Curabitur ante libero, tincidunt a lectus a, sagittis vulputate libero. Aenean auctor at tortor eget auctor. Aliquam augue orci, varius sed mi eu, bibendum viverra nibh. Fusce quis mi metus. Nam sit amet erat a nulla vehicula interdum. Aenean malesuada dolor at mauris finibus congue. Nam ut posuere urna.</p>
	<p>Etiam quis posuere purus, a faucibus odio. Quisque tincidunt, turpis eget facilisis iaculis, mi ex ornare velit, tristique vulputate ligula lacus ac dolor. Maecenas tempor consectetur lacus ac pretium. Nullam ultricies imperdiet massa in egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus posuere lacus vitae consectetur. Aliquam tempor condimentum massa, a blandit mauris mollis vel. In vitae purus consectetur, pharetra augue nec, mattis lorem. Vivamus tellus nisl, dignissim at lacus convallis, mollis tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales est quis mi efficitur lacinia. Phasellus dolor lorem, scelerisque a eros quis, ullamcorper convallis ipsum. Nulla facilisi. Phasellus pharetra, quam tincidunt semper faucibus, lorem eros feugiat erat, nec facilisis neque quam vel eros. Pellentesque tempus mi blandit erat ultrices, quis varius nisl feugiat.</p>
	<p>Duis quis rutrum sapien, at condimentum risus. Aenean sed nisi ac velit pretium luctus. Curabitur et leo ac sapien viverra bibendum vitae et justo. Aenean eu maximus arcu. Fusce tempor, enim in cursus fringilla, massa lorem euismod quam, quis tempor leo ex vitae massa. Proin tincidunt quam sed erat bibendum auctor. Integer placerat lacinia molestie. Proin a erat erat. Praesent ut diam vitae felis tristique semper ornare et risus. Nunc vulputate magna quis leo elementum vehicula. Vestibulum elit dui, malesuada at ullamcorper tempus, eleifend non risus.</p>
	<p>Mauris nisl diam, vestibulum et mi eget, dapibus lobortis lorem. Quisque ornare tincidunt faucibus. Etiam pretium nisi at dignissim condimentum. Donec venenatis, neque auctor maximus volutpat, turpis tellus dapibus lacus, ac suscipit lorem lectus ac elit. In quis libero lacinia, mattis augue vel, ullamcorper lorem. Integer finibus ac diam vel maximus. Duis a ultricies ex.</p>
	<p>Fusce eu eros quis dui commodo congue. Maecenas a sodales lectus, pulvinar cursus ligula. Nunc tempor lectus efficitur semper congue. Vestibulum vel nunc vestibulum, dictum tortor eu, tristique urna. Vivamus fringilla imperdiet velit vel lacinia. Nam sagittis sapien lacinia, fermentum odio a, tincidunt ante. Quisque nec mauris sit amet eros imperdiet sodales nec non eros. Nunc mollis vestibulum auctor. Nam quis accumsan est, a egestas arcu. Etiam at ultrices ex. </p>


	<snippet>

	<script>
	document.addEventListener("DOMContentLoaded", function(event) {

	var headerHeight = 40;
	var geozzyExplorerFrame = document.getElementById("geozzyExplorerFrame");
	var geozzyCurtain = document.getElementById("geozzyCurtain");
	var geozzyTakemeout = document.getElementById("geozzyTakemeout");

	// iframe dimensions
	document.body.style.overflowX ='hidden';
	geozzyExplorerFrame.style.width = '100%';
	geozzyExplorerFrame.style.height= window.innerHeight-40;

	// curtain dimensions
	geozzyCurtain.style.width = geozzyExplorerFrame.style.width;
	geozzyCurtain.style.height = geozzyExplorerFrame.style.height;
	geozzyCurtain.style.position = 'absolute';
	geozzyCurtain.style.zIndex = geozzyExplorerFrame.style.zIndex + 1;
	geozzyCurtain.style.backgroundColor = "white";
	geozzyCurtain.style.opacity = "0.5";

	// take me out button
	geozzyTakemeout.style.height = 20;
	geozzyTakemeout.style.right = 20;
	geozzyTakemeout.style.bottom = 20;
	geozzyTakemeout.style.padding = 20;
	geozzyTakemeout.style.cursor = "pointer";
	geozzyTakemeout.style.backgroundColor = "green";
	geozzyTakemeout.style.zIndex = geozzyCurtain.style.zIndex + 1;
	geozzyTakemeout.style.position = 'fixed';

	geozzyTakemeout.addEventListener("click", function(){

	window.scrollTo(0, geozzyExplorerFrame.offsetTop-200);

	});

	// the scroll event
	window.addEventListener('scroll', function(e) {
	var iframeViewportOffset = geozzyExplorerFrame.getBoundingClientRect();
	// these are relative to the viewport, i.e. the window
	if( iframeViewportOffset.top > headerHeight ) {
	geozzyCurtain.style.display = "block";
	geozzyTakemeout.style.display = "none";
	}
	else {
	geozzyCurtain.style.display = "none";
	geozzyTakemeout.style.display = "block";
	}
	});

	});
	</script>
	<div id="geozzyCurtain"></div>
	<div id="geozzyTakemeout">SÁCAME!!</div>
	<iframe id="geozzyExplorerFrame" src="https://turismo.ribeirasacra.org/es/mapas-interactivos" ></iframe>

	</snippet>

	</body>
	</html>