Depot43-Unterlagen

Code Elemente - HTML - CSS - JS
            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 CSS3 JS</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- CSS *************************** -->
  <style>
	 /* Debugging Anzeige Balken */
	#offset {
		position: fixed;
		top: 0;
		text-align: center;
		width: 100%;
		color: #fff;
		padding:  0;
		z-index: 999;
	}
	#progressBar {
		background-color: #f00;
		height: 20px;
		width: 10px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
	}

	/*  Layout */
	header {
		background-color: #ccc;
		height: 20px;
		position:fixed;
		top:0;
		width:100%;
		box-shadow: 0px 5px 6px;
	}
	main img {
	  	position:absolute;
		z-index:-1;
	  }
	footer {
		background-color: #ccc;
		height: 20px;
		position:fixed;
		width:100%;
		bottom:0;
		box-shadow: 0px -5px 6px;
	}
  </style>
  </head>

<!-- HTML *************************** -->
<body>

<div id="progressBar" data-0="width:0%;" data-end="width:100%;"></div> 
<div id="offset">10</div>
	<header> 
	header
	</header> 
	<main> 
		<img src="http://depot43.ch/unterlagen/assets/skrollr/gitschen-web.jpg" alt="Gitschen" data-start="top:10px" data-end="top:100px" data-anchor-target="main">  
	</main> 
	<footer> 
	footer
	</footer>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/skrollr.min.js"></script>
  <!-- jQuery optional -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
  <script type="text/javascript">
  
              var s = skrollr.init({
            forceHeight: true,
            render: function(data) {

                //console.log(data.curTop);
                jQuery('#offset').text(data.curTop);
            }
        });
  
  </script>
</body>
</html>




            
Ein Bild
