1

Olá, Ao acionar o scroll, eu adiciono uma class a div-operador, fazendo com que seja exibido um box-shadow, no topo da div-operador.

Mas conforme imagem abaixo, o elementos input, select, etc... estão acima da sombra.

Como faço para que a sombra do topo sobreponha os elementos que estão dentro da div-operador ao serem rolados para cima ?

javascritp

$('#div-operador"').scroll(function() {
    var y = $(this).scrollTop();
    if (y > 1) {
	$('#div-operador').addClass('shadow');
    }
    else {
        $('#div-operador').removeClass('shadow');
    }
});

CSS

#div-operador {
   padding-top: 5px;
   overflow: auto;
   width: auto;
   max-height: 205px;
   height: 205px;
}
.shadow {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
    z-index:5;
}

html

<div class="col-xs-8">
   <div id="div-operador" class="col-md-12">
      <div class="row clearfix">
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-perfil">Perfil</label>
                  <select id="sel-perfil" class="form-control input-sm form-md-3" name="perfil"  title="Perfil" autocomplete="off" required >
                      <option>Perfil</option>
                  </select>
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-nivel">Nível</label>
                  <select id="sel-nivel" class="form-control input-sm form-md-3" name="nivel"  title="nivel" autocomplete="off" required >
                      <option>Perfil</option>
                  </select>
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-email">email</label>
                  <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="txt-login">login</label>
                  <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
             </div>
          </div>
       </div>
   </div>
</div>

Resultado

inserir a descrição da imagem aqui

5
  • Mas só com esse trecho de HTML não é possível simular o seu problema. Por favor edite e inclua o restante do código de forma que seja possível simular o problema. Pois esse código está bem distante do que está na imagem...
    – hugocsl
    Commented 8/02/2019 às 23:12
  • Este código HTML serve para simular o problema, a única questão, eu que existem diversos cols-xs-6 dentro da div-operador alem do que está no exemplo, e o div-operador está dentro de outro div Commented 8/02/2019 às 23:49
  • Eu editei a questão e adicionei outros detalhes Commented 9/02/2019 às 0:11
  • @WagnerFilho tentei simular seu código para solução, mas faltam detalhes da estrutura HTML. Contudo ao observar superficialmente percebe-se que você atribui o z-index apenas a class que você insere via jQuery. Atribua o z-index diretamente na class pai do elemento. Commented 9/02/2019 às 1:11
  • Não funcionou, adicionei o z-index e position relative Commented 9/02/2019 às 1:50

1 Resposta 1

2

Olha eu fiz um modelo que acredito que pode te atender. Da forma que vc fez eu tb não consegui fazer a sombre do pai ficar por cima do input do filho.

Então a solução que encontrei foi colocar dentro do pai mais um filho (que tem a sombra), e esse por sua vez fica por cima do irmão como o esperado. Também precisei colocar nesse irmão position:sticky para ele não sumir quando for feito o scroll no container.

inserir a descrição da imagem aqui

Então basicamente eu não mudei nada no Script, só que ao fazer o scroll no container eu adiciono uma classe de opacity no filho e não o shadow no pai e ficou tudo certo

Segue o código referente a imagem acima.

$('#div-operador').scroll(function() {
    var y = $(this).scrollTop();
    if (y > 1) {
	$('.teste').addClass('mostra');
    }
    else {
        $('.teste').removeClass('mostra');
    }
});
#div-operador {
   padding-top: 5px;
   overflow: auto;
   width: auto;
   max-height: 205px;
   height: 205px;
   overflow-y: auto;
   position: relative;

   padding: 0;
}
#div-operador .row {
    margin: 0;
}
.teste {
    position: sticky;
    top: 0px;
    left: 0;
    width: 100%;
    height: 7px;
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
    z-index:5;
    opacity: 0;
    transition: opacity 300ms;
}
.mostra {
    opacity: 1;
}
.shadow {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
    z-index:5;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="col-xs-8">
            <div id="div-operador" class="col-md-12">
            
  <!-- irmão com a sobra -->
  <div class="teste"></div>
  
               <div class="row clearfix">
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-perfil">Perfil</label>
                           <select id="sel-perfil" class="form-control input-sm form-md-3" name="perfil"  title="Perfil" autocomplete="off" required >
                               <option>Perfil</option>
                           </select>
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-nivel">Nível</label>
                           <select id="sel-nivel" class="form-control input-sm form-md-3" name="nivel"  title="nivel" autocomplete="off" required >
                               <option>Perfil</option>
                           </select>
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-email">email</label>
                           <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="txt-login">login</label>
                           <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-email">email</label>
                           <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="txt-login">login</label>
                           <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-email">email</label>
                           <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="txt-login">login</label>
                           <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
                      </div>
                   </div>
                </div>
            </div>
         </div>
</div>

2
  • Perfeito, não teria pensado no truque de usar um class .mostra, muito menos usar um div irmão.. obrigado pela solução. Commented 9/02/2019 às 16:36
  • @WagnerFilho tmj pra esse problema não consegui pensar em algo pra resolver no container pai tive que usar um filho novo, mas acho que resolve. Boa sorte ai
    – hugocsl
    Commented 9/02/2019 às 19:34

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 .