<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Fixed Sticky Emoji Menu - RJM Programming - August, 2019 ... Thanks to https:////www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header</title>
<style>
/* Style the header ... thanks to https://www.w3schools.com/howto/howto_js_sticky_header.asp */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}

.header {
padding: 10px 16px;
background: #bbb;
color: #f1f1f1;
}

/* Page content */
.diframe {
padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .diframe {
padding-top: 102px;
}

td {
vertical-align:top;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
</style>
<script type='text/javascript'>
var emojilist=['🔊', '📏', '🏃🏾‍♀️', '🍌', '📧', '🍱', '🇦🇩', '🔝'];
var emojiurls=['../HTMLCSS/web_audio.htm', '../HTMLCSS/square_hr_tracing.htm', '../HTMLCSS/emoji_walk_animation.htm', '../HTMLCSS/fruits.html', '../HTMLCSS/name_your.html', '../HTMLCSS/circuit.htm', '../HTMLCSS/flagquiz.htm', '../HTMLCSS/emoji_overlay.htm'];
var emojihtag=['web_audio', 'square_hr_tracing', 'emoji_walk_animation', 'fruits', 'name_your_mascot', 'sushi_train', 'flag_quiz', 'emoji_overlay'];
var lastuplace='';
var lasthtag='';
var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;

function oicheck(iois){
var ok=false;
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (aconto.body.innerHTML.toLowerCase().indexOf('>not found<') == -1) { ok=true; }
//var rect=aconto.body.getBoundingClientRect();
//alert('' + rect.width);
}
}
}
if (!ok && lastuplace.replace('/PHP/', '/HTMLCSS/').indexOf('/HTMLCSS/') != -1) {
lastuplace=lastuplace.replace('/PHP/', '/').replace('/HTMLCSS/', '/');
iois.src=lastuplace;
}
}

function gotothis(label, uplace) {
document.getElementById('top-container').style.display='none';
lastuplace=uplace;
lasthtag=label;
var iih=document.getElementById('myrow').innerHTML, xiih='';
if (document.getElementById('i' + label)) {
xiih=document.getElementById('i' + label).outerHTML;
document.getElementById('myrow').innerHTML='<td id=' + label + ' style="width:' + Math.floor(eval(0.8 * deviceWidth)) + 'px;height:74vh;"><iframe style="width:' + Math.floor(eval(0.8 * deviceWidth)) + 'px;height:74vh;" onload=oicheck(this); id=i' + label + ' name=i' + label + ' src="' + uplace + '"></iframe></td>' + iih.replace(xiih, '');
location.href='#' + label;
} else {
var rect=document.getElementById('mytable').getBoundingClientRect();
document.getElementById('mytable').style.width='' + Math.floor(eval(rect.width + deviceWidth)) + 'px';
document.getElementById('myrow').style.width='' + Math.floor(eval(rect.width + deviceWidth)) + 'px';
document.getElementById('myrow').innerHTML='<td id=' + label + ' style="width:' + Math.floor(eval(0.8 * deviceWidth)) + 'px;height:74vh;"><iframe style="width:' + Math.floor(eval(0.8 * deviceWidth)) + 'px;height:74vh;" onload=oicheck(this); id=i' + label + ' name=i' + label + ' src="' + uplace + '"></iframe></td>' + iih;
location.href='#' + label;
}
setTimeout(fivelater, 3000);
}

function fivelater() {
location.href='#hplace';
}

function onl() {
var wds=[], ii=0, jj=0;
var ihis=document.getElementById('emojih').innerHTML;
if (emojilist.length > 0) {
ihis='';
document.getElementById('diframe').innerHTML='<table id=mytable style="width:100%;"><tr id=myrow></tr></table>';
for (ii=0; ii<emojilist.length; ii++) {
wds=emojihtag[ii].split('_');
tle=wds[0].substring(0,1).toUpperCase() + wds[0].substring(1).toLowerCase();
for (jj=1; jj<wds.length; jj++) {
tle+=' ' + wds[jj].substring(0,1).toUpperCase() + wds[jj].substring(1).toLowerCase();
}
ihis+='<a title="' + tle + '" style="cursor:pointer;text-decoration:none;font-size:36px;" target=i' + emojihtag[ii] + ' id=a' + emojihtag[ii] + ' href="' + emojiurls[ii] + '" onclick="gotothis(' + "'" + emojihtag[ii] + "','" + emojiurls[ii] + "'" + ');">' + emojilist[ii] + '</a> ';
}
}
document.getElementById('emojih').innerHTML=ihis;
}
</script>
</head>
<body onload='setTimeout(onl,5000);'>

<div class="top-container" id="top-container">
<h1>The Emoji Menu</h1>
<p>Click or touch the functionality of your choosing.</p>
</div>

<div class="header" id="myHeader">
<h3 style='color:purple;' id='hplace'><span id='emojih'></span> The Fixed Sticky Emoji Menu - RJM Programming - August, 2019 ... thanks to <a target=_blank title='Sticky header information from W3schools, thanks' href='//www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header'>W3schools</a></h3>
</div>

<div class="diframe" id="diframe">
<h3>On Scroll Sticky Header</h3>
<p>The header will stick to the top when you reach its scroll position.</p>
<p>Scroll back up to remove the sticky effect.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<script type='text/javascript'>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>

</body>
</html>