1
I’m using the following code:
<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>
It’s basically a floating menu for a virtual store platform. Turns out it’s working normally, but I added two toggle buttons to hide and show this floating menu. However when reloading the page if the customer had hidden it he comes back appearing. The right thing would be to remain hidden.
How to proceed, guys?
It kind of worked. But when reloading the pages it is always appearing minimized. It can only be minimized if the client minimizes... Do you have any idea what it might be? rs
– Ádanny Silva Mota
sessionStorage.setItem('mostrar div', 'false'); Was out of function. I put it inside the function and it worked perfectly. Thank you very much VME. Helped a lot. Helped a lot even.
– Ádanny Silva Mota
Sorry. Little mistake of mine. I didn’t realize it then. But I’m glad you figured it out fast. If this answer has solved your problem, please mark it as the best answer!
– Victor Eyer
Thanks again. Ready :D
– Ádanny Silva Mota