I am trying to create a sticky menu. My code works great in jsfiddle, but when I take it over to my site it doesn't work. In my console, I see the error:
Typeerror: fixheader is null
This is my javascript:
<script type="text/javascript">
window.onscroll = function() {myFunction()};
var fixheader = document.getElementById("fixheader");
var sticky = fixheader.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
fixheader.classList.add("sticky")
} else {
fixheader.classList.remove("sticky");
}
}
</script>
HTML:
<div id="fixheader">
<div class="inner">
<div id="ToggleMenu" class="fa fa-bars normal"></div>
<div class="header-logo">
<a href="https://www.myurl.com/"><img src="https://cdn10.bigcommerce.com/s-fctqc2/product_images/logo_website_1464304863__33790.png" id="LogoImage" alt="http://www.myurl.com/" border="0"></a>
</div>
<div class="header-secondary">
<ul class="pages-menu sf-menu sf-horizontal sf-js-enabled">
<li class="HasSubMenu">
<a href="http://www.myurl.com/meet-them/" class="sf-with-ul"><span>zip</span><span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="https://www.myurl.com/meet-them/">Meet Them!</a></li><li><a href="http://www.myurl.com/free-patterns-them/">Patterns</a></li><li><a href="https://www.myurl.com/videos/">Videos</a></li>
</ul>
</li> <li class="HasSubMenu">
<a href="http://www.myurl.com/wood-looms/" class="sf-with-ul"><span>Shop</span><span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="/wood-looms/">Wood Looms</a></li><li><a href="/plastic-looms/">Plastic Looms</a></li><li><a href="/sock-looms/">Sock Looms</a></li><li><a href="/zip-looms/">zip Looms</a></li><li><a href="/kits/">Loom Kits / Bundles</a></li><li><a href="/accessories">Accessories</a></li><li><a href="/books/">Books</a></li><li><a href="/yarn">Yarn</a></li><li><a href="http://www.myurl.com/giftcertificates.php">Gift Certificates</a></li>
</ul>
</li> <li class="HasSubMenu">
<a href="/free-downloadable-patterns/" class="sf-with-ul"><span>Free Patterns</span><span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="https://www.myurl.com/meet-our-designers/">Meet Our Designers</a></li>
</ul>
</li> <li class="HasSubMenu">
<a href="https://www.myurl.com/learn/" class="sf-with-ul"><span>Learn</span><span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li><a href="/videos">Videos</a></li><li><a href="https://www.myurl.com/loom-knitting-how-tos/">Loom Knitting How To's</a></li><li><a href="https://www.myurl.com/about-us/">About Us</a></li>
</ul>
</li> <li class="">
<a href="http://blog.myurl.com"><span> BLOG</span></a>
</li> <li class="">
<a href="https://www.myurl.com/faqs/"><span>FAQs</span></a>
</li>
<!-- <li class="ic-top-search-green"><a id="search-li" title="Search" onclick="kb_showSearch()" style="display:block;width:100%"> </a></li> -->
<div id="SearchForm" class="cf search-dialog" title="Search" style="">
<form action="https://www.myurl.com/search.php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query">Search</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox default" value="Search">
<input type="submit" class="Button" value="" name="Search" title="Search">
</form>
</div>
<script type="text/javascript">
var QuickSearchAlignment = 'right';
var QuickSearchWidth = '390px';
lang.EmptySmallSearch = "You forgot to enter some search keywords.";
// uniform() is deprecated in Blueprint theme; remove binding below when removing uniform
$(document).ajaxComplete(function() {
$('input[type=checkbox], select').not('.UniApplied').uniform();
});
</script>
</ul>
</div>
<div id="cart-amount">
<a href="https://www.myurl.com/cart.php" class="Cart"><span class="bag-handle"></span><span class="total"></span></a>
</div><!-- end cart-amount -->
</div><!-- end inner -->
</div><!-- end Header -->
</div><!-- end inner -->
</div>
My jsfiddle is here:
https://jsfiddle.net/xw8atLgq/
How do I fix this? I searched for similar problems in Stack Overflow but none seems to relate quite to my coding. Thanks in advance. Thanks!
EDIT: Thanks all! Managed to fix it. It was a combination of 2 things; 1) the javascript needed to be moved down since it was being called too early and 2) I had a CSS style in there that was overriding the static position, so it wouldn't show. All resolved!
