Version compl�te: jsB@nk » Lien » Tooltip » Positionnement Afficher/Masquer les calques avec Scroll
URL: https://www.javascriptbank.com/positioning-show-hide-layers-with-scroll.html
Cet exemple montre et cache toutes les couches qui sont initialement fixés à l'sametop gauche et positions. Comme vous le scroll la page et cliquez sur les liens, les couches à afficher le même rapport fenêtre l'emplacement, la première position étant ajustés en fonction du montant de défiler.
Version compl�te: jsB@nk » Lien » Tooltip » Positionnement Afficher/Masquer les calques avec Scroll
URL: https://www.javascriptbank.com/positioning-show-hide-layers-with-scroll.html
<style type="text/css">body { font: 12px/1.3 Verdana, arial, helvetica, sans-serif }h1 { font-size: 16px;}h2 { font-size: 14px;}a:link { color:#33c }a:visited { color:#339 }#lnks { position:absolute; left:10px; top:60px; width:100px }/* Include id's for all your layers here, with commas between. Set width, left and top */#lyr1, #lyr2, #lyr3, #lyr4, #lyr5, #lyr6, #lyr7, #lyr8 { position:absolute; visibility:hidden; z-index:100;left:110px; top:60px; width:300px;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">// set these variables equal to the original top and left of layersvar orig_x=110; // layers' leftvar orig_y=65;// layers' top// onresize for ns4var origWidth, origHeight;if (document.layers) {origWidth = window.innerWidth; origHeight = window.innerHeight;window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }}var cur_lyr;// holds id of currently visible layerfunction swapLayers(id) { if (cur_lyr) hideLayer(cur_lyr); shiftLayerTo( id, orig_x, orig_y + getScrollY() ); showLayer(id); cur_lyr = id;}function showLayer(id) { var lyr = getElemRefs(id); if (lyr && lyr.css) lyr.css.visibility = "visible";}function hideLayer(id) { var lyr = getElemRefs(id); if (lyr && lyr.css) lyr.css.visibility = "hidden";}function shiftLayerTo(id,x,y) { var px = document.layers? 0: "px"; var lyr = getElemRefs(id); if (lyr && lyr.css) { lyr.css.top = y + px; lyr.css.left = x + px; }}function getElemRefs(id) {var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;if (el) el.css = (el.style)? el.style: el;return el;}// credit to http://www.13thparallel.org for the following function// returns amount of vertical scrollfunction getScrollY() {var sy = 0;if (document.documentElement && document.documentElement.scrollTop)sy = document.documentElement.scrollTop;else if (document.body && document.body.scrollTop) sy = document.body.scrollTop; else if (window.pageYOffset)sy = window.pageYOffset;else if (window.scrollY)sy = window.scrollY;return sy;}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="swapLayers('lyr1')" topmargin=400px><div id="lnks"><!-- Links for showing/hiding can include status bar message, as first link demonstrates. --><p><a href="javascript://" onclick="swapLayers('lyr1'); return false" onmouseover="window.status='Show Intro layer'; return true" onmouseout="window.status=''">Link 1</a></p><p><a href="javascript://" onclick="swapLayers('lyr2'); return false">Link 2</a></p><br><br><p><a href="javascript://" onclick="swapLayers('lyr3'); return false">Link 3</a></p><br><br><p><a href="javascript://" onclick="swapLayers('lyr4'); return false">Link 4</a></p><br><br><p><a href="javascript://" onclick="swapLayers('lyr5'); return false">Link 5</a></p><br><br><p><a href="javascript://" onclick="swapLayers('lyr6'); return false">Link 6</a></p><br><br><p><a href="javascript://" onclick="swapLayers('lyr7'); return false">Link 7</a></p><br><br><p><a href="javascript://" onclick="swapLayers('lyr8'); return false">Link 8</a></p></div><div id="lyr1" style="top: 65px; left: 110px; visibility: hidden;"><h2>Layer 1</h2><p>This example shows and hides layers that are all initially set to the same top and left positions. As you scroll down the page and click on links, the layers show at the same relative window location, the top position being adjusted according to the amount of scroll.</p></div><div id="lyr2" style="top: 65px; left: 110px; visibility: visible;"><h2>Layer 2</h2><p>Two variables need to be set: orig_x and orig_y equal to the original top and left positions. Put the id of your first layer in the onload handler.</p></div><div id="lyr3"><h2>Layer 3</h2><p>Works great for a long list of links. Your users won't have to scroll up and down, and the code is still fairly simple.</p></div><div id="lyr4"><h2>Layer 4</h2><p>Content for layer 4 here.</p></div><div id="lyr5"><h2>Layer 5</h2><p>Content for layer 5 here.</p></div><div id="lyr6"><h2>Layer 6</h2><p>Content for layer 6 goes here.</p></div><div id="lyr7"><h2>Layer 7</h2><p>Put any type of content you wish in your layers.</p></div><div id="lyr8"><h2>Layer 8</h2><p>Content for layer 8 here.</p><p> </p></div><center><h1>Adjust Show/Hide Layers Position when Document Scrolled</h1><!--<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-2417948-1";urchinTracker();</script>--><table border="0" width="800px" cellspacing="0" cellpadding="0"><tr><td></td><td width=560px align=center><p align=left>This example shows and hides layers that are all initially set to the sametop and left positions. As you scroll down the page and click on links, the layers show at the same relative window location, the top position being adjusted according to the amount of scroll.</p> <!--<script type="text/javascript">google_ad_client = "pub-8741228267140329";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "image";google_ad_channel = "5623769207+4071938481+2392552272";google_color_border = "FFFFFF";google_color_bg = "FFFFFF";google_color_link = "0000FF";google_color_text = "000000";google_color_url = "0000FF";//</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>--></td><td></td></tr></table><br><br><br><code>Over 2000+ free Javascript<br>at <a href="http://javascriptbank.com">JavaScriptBank.com Website</a></code></center></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->