6

Eu dividi minha pagina com uma grid, onde a menor parte eu coloquei itens q direcionam para locais da pagina, eu queria saber como deixar essa menor parte fixa e o scroll funcionar somente na parte maior da pagina onde se encontra todo o conteúdo. Assim quando eu clicar em um item na parte menor ele direciona a pagina para o lugar respectivo do item e os itens continuam aparecendo na parte menor da pagina. Observem nas imagens que quando clico no item local que esta na lateral ele direciona a pagina para o local respectivo mas os itens ficam no mesmo lugar da pagina... inserir a descrição da imagem aqui inserir a descrição da imagem aqui

CSS:

.fixa {
    positionf: fixed;
    overflow: hidden;
}

HTML:

 <ion-view view-title="TESTE" title="Locations" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>

    <ion-content delegate-handle="content" class="padding" overflow-scroll="true">
<div class="row">
<div class="col col-33 fixa">
 <section ng-controller="PageController">
<div class="list">
<a id="location-0" ng-click="scrollToAnchorWithinCurrentPage('location-1')" style="border-left-color: white; border-right-color: white; font-size:20px;" class="semBorda calm item item-icon">
<i style="font-size:25px;" class="ion-ios-briefcase calm"></i>
Dados do Profissional
</a>
<a class="semBorda calm item item-icon" style="border-left-color: white; border-right-color: white; font-size:20px;"  ng-click="scrollToAnchorWithinCurrentPage('location-2')">
<i style="font-size:25px;" class="ion-home calm"></i>
Local
</a>
</div></div>
<div class="col">

<a id="location-1" style="font-size:23px;" class="semBorda calm item item-icon-left" >
<i style="font-size:60px;" class="ion-ios-briefcase calm"></i>
Dados do Profissional
</a> 

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="location-2" style="font-size:23px;" class="semBorda calm item item-icon-left" >
<i style="font-size:60px;" class="ion-home calm"></i>
    Local
</a>
<br>
    </div></div>
<br>
</section>
</div></div>
    </ion-content>

</ion-view>
1
  • Poste fotos e partes do código para que fique mais claro.
    – Tiago P.C
    Commented 25/11/2015 às 10:50

1 Resposta 1

2

Para deixar fixa:

.class {
    position:fixed;
    top:0; //distancia em px do topo
    left:0; //distancia em px da lateral esquerda - ou right:0; para lateral direita
    bottom:0; //distancia em px do rodapé
}

Para desabilitar o scroll:

.class2 {
    overflow:hidden;
}

Apenas mude o nome das classes para ser igual ao que você usa.

Obs.: se você utilizar position:fixed; é bom ficar atento para a necessidade de usar também um z-index, pois alguns elementos podem ficar sobrepostos uns aos outros.

7
  • eu coloco essas class na div da grid? por ex: <div class="col col-33 fixa"> (fixa é o nome da class) no css coloquei exatamente como você sugeriu só mudei o nome para fixa...
    – Matheus D
    Commented 25/11/2015 às 10:58
  • Isso. Na verdade depende do seu layout, mas acredito que assim funcione. Se não funcionar, atualize sua pergunta e poste o seu código html/css para analisar melhor. Commented 25/11/2015 às 11:00
  • Beleza, atualizado.
    – Matheus D
    Commented 25/11/2015 às 11:14
  • Não funcionou? Verifica por erros de estrutura e de syntax. Repare que o seu css está escrito positionf e não position. Além disso, dentro da sua div de classe fixa, você possui tags de fechamento de div onde não é necessário. Organize isso e veja se funciona. Commented 26/11/2015 às 9:55
  • Sim está tudo organizado já, mas continua não funcionando...
    – Matheus D
    Commented 26/11/2015 às 10:06

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 .