Block Scroll from one side of the grid

Navigation
6

I split my page with a grid, where the smallest part I placed items that point to places on the page, I wanted to know how to leave this smaller part fixed and the scroll only works on the larger part of the page where all the content is . So when I click on an item in the smaller part it directs the page to the respective place of the item and the items continue to appear on the smaller part of the page. Note in the pictures that when I click on the local item that is on the side it directs the page to the respective location but the items are in the same place as the page ...

CSS:

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

HTML:

<ion-viewview-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>
    
asked by anonymous 25.11.2015 / 11:48

1 answer

2

To leave fixed: 

.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é
}

To disable scroll: 

.class2 {
    overflow:hidden;
}

Just rename the classes to match what you use.

Note: If you use position:fixed; it's good to be aware of the need to also use a z-index because some elements may overlap each other.

    
25.11.2015 / 11:51
How to make a sum in Lambda with recursive logic using successor and predecessor? Methods of storing images