1

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?

1 Resposta 1

1

Usei sessionStorage ontem em um projeto meu. Vou fazer para você de maneira bem simples.

Para colocar um valor no sessioStorage, utilizamos sessionStorage.setItem('nome', 'valor'); e, para pegar esse valor, utilizamos sessionStorage.getItem('nome');

Vamos ao 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');
sessionStorage.setItem('mostrardiv', 'verdadeiro');
}
function OcultarDiv(){
    $('.float-menu-content').css('display', 'none');
    $('#float-close').css('display', 'none');
    $('#float-open').css('display', 'block');
 sessionStorage.setItem('mostrardiv', 'falso');    }

</script>
      <script type="text/javascript">
         $(document).ready(function() {
          var mostrardiv = sessionStorage.getItem('mostrardiv');
if (mostrardiv == 'falso') {
$('.float-menu-content').css('display', 'none');
        $('#float-close').css('display', 'none');
        $('#float-open').css('display', 'block');
    }
});
</script>

Fiz pelo celular. Espero que esteja tudo ok!

4
  • Meio que funcionou. Porém ao recarregar as páginas ele ta sempre aparecendo minimizado. Ele só pode aparece minimizado se o cliente minimizar... Tem alguma ideia do que pode ser? rs Commented 21/05/2017 às 23:43
  • O sessionStorage.setItem('mostrardiv', 'falso'); Estava fora da função. Coloquei dentro da função e funcionou perfeitamente. Muito Obrigado VME. Ajudou bastante. Ajudou muito mesmo. Commented 21/05/2017 às 23:57
  • Desculpe. Pequeno erro meu. Não percebi na hora. Mas fico feliz que tenha percebido rápido. Se essa resposta solucionou seu problema, peço a gentileza de marcá-la como a melhor resposta! Commented 22/05/2017 às 0:00
  • Obrigado mais uma vez. Prontinho :D Commented 22/05/2017 às 0:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .