fix footer test

megamenu s obsahem

by Petr Haluza

HTML

<div class="content" id="contentdiv">

<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>

<footer>footer
<div>
jsem footer
</div>
</footer>

<div id="headerClone">BAF</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;700;900&display=swap');

/*@import url('https://b2b.100mega.cz/css/theme-default.css?v=./../www/css/theme-default.css');*/

body{	line-height: 1.5;	font-family: 'Noto Sans', sans-serif;	font-size:14px; font-weight: 400;	overflow-x: hidden;}
*{	margin:0;	box-sizing: border-box;}
:before,:after{	box-sizing: border-box;}

/********/
:root {
  --mega-red: #ea0000;
	--mh_submenu_color: #48596c;
	--mh_menu_background:#495a6a;
  --mega-aside-width: 230px;
	--mega_header-height: 56px
}


/* demo */
.content { margin-top:100px; /* add space for fixed header */}
footer {height:100px; background-color: gray; transition: background-color 0.2s ease-in-out;  }
/* / demo */

#headerClone {position:fixed; height:100px; background: orange; bottom:0; right: 0; transition: bottom .2s ease-in-out; }
#headerClone.relative { position:relative; background: red;}

JavaScript

/* vytvořím klon headeru XXX*/
/* HAP - ovládání skrývání a odkrývání headeru a jeho spodního klonu v závislosti na stavu skrolu a pozici v okně */
var scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
var footerOffset = scrollableHeight - 200;
var prevScrollpos = window.pageYOffset;
var fixnout = document.querySelector("#headerClone");

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  switch (true) {
    case (currentScrollPos > footerOffset):
      $(fixnout).addClass('relative');
    break;/* sjelijsme k footeru - skyjeme header */

    case (prevScrollpos > currentScrollPos):
      $(fixnout).removeClass('relative');
    break;/* jedeme nahoru*/
  }
  prevScrollpos = currentScrollPos;
}
/* /end HAP */