Estou usando o seguinte código:
<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.float-menu-fixed').removeClass("closed");
$('.float-menu-fixed').addClass("visible");
}
else{
$('.float-menu-fixed').addClass("closed");
$('.float-menu-fixed').removeClass("visible");
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#float-open").click(MostrarDiv);
$("#float-close").click(OcultarDiv);
});
function MostrarDiv(){
$('.float-menu-content').css('display', 'block');
$('#float-close').css('display', 'none');
$('#float-open').css('display', 'none');
$('#float-close').css('display', 'block');
}
function OcultarDiv(){
$('.float-menu-content').css('display', 'none');
$('#float-close').css('display', 'none');
$('#float-open').css('display', 'block');
}
</script>
<div class="float-menu-fixed">
<div class="float-menu">
<div class="float-menu-content">
<div class="container">
<div class="row">
<div class="col-sm-2">
<div id="logo-float-menu">
<?php if ($logo) { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-sm-5">
<div id="search-float">
<div id="new-search" class="input-group">
<input type="text" name="new-search" value="" placeholder="O que procura" class="form-control input-lg" />
<span class="input-group-btn">
<button type="button" class="btn-search-header"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="call-center">
<div class="atendimento">
<small><?php echo $text_call; ?></small>
<span><?php echo $text_center; ?></span>
</div>
<ul class="dropdown-menu hover-contact">
<li><i class="fa fa-phone" style="margin-right:6px;font-size: 18px;"></i> (38) 3613-1414</li>
<li><i class="fa fa-phone" style="margin-right:9px;font-size: 18px;"></i>(38) 99141-9842</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div id="cart-float">
<?php echo $cart; ?>
</div>
</div>
</div>
</div>
</div>
<div id="float-close"></div>
<div id="float-open"></div>
</div>
Basicamente é um menu flutuante para plataforma de uma loja virtual. Acontece que está funcionando normalmente, mas eu adicionei dois botões toggle para esconder e mostrar esse menu flutuante. Porem ao recarregar a página se o cliente tivesse escondido ele ele volta aparecendo. O certo seria continuar escondido.
Como proceder galera?