mercredi 25 mars 2015

Hide navigation menu on page load using jQuery


I'm using the theme Divi from Elegant Themes and I am trying to hide the main navigation menu when the page loads. I then would like for the menu to load as I scroll as seen here (http://ift.tt/1E2B15t)


I've successfully been able to have the menu appear and reappear as desired after I scroll down then back up to the top of the page. I have this as my current jQuery funtion:



<script type="text/javascript">
jQuery(document).ready(function($) {
var header = $('#main-header');
$(window).scroll(function () {
if ($(document).scrollTop() == 0) {
header.removeClass('et-fixed-header');
} else {
header.addClass('et-fixed-header');
}
});
});
</script>


This is the CSS for that section:



#main-header { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.home #main-header { opacity: 0; top: -40px !important;}
.home #main-header.et-fixed-header { opacity: 1; top: 0 !important; }
.home.et_fixed_nav #page-container { padding-top: 0!important; }
.et_fixed_nav #page-container { padding-top: 80px !important; }


I have everything labeled in the html appropriately, but I can't figure out how to make the menu not show initially. I've tried to use this, but I'm guessing I'm doing something wrong:



<script type="text/javascript">
jQuery(document).ready(function($) {
var header = $('#main-header');
$(document).load(function () {
header.removeClass('et-fixed-header');
$(window).scroll(function () {
if ($(document).scrollTop() == 0) {
header.removeClass('et-fixed-header');
} else {
header.addClass('et-fixed-header');
}
});
});
</script>


I'm new to jQuery and a novice at WordPress development...


Thanks in advance!





Aucun commentaire:

Enregistrer un commentaire