Block Scroll on one side of the grid

Asked

Viewed 278 times

6

I divided my page with a grid, where the smallest part I put items q direct to page locations, I wanted to know how to let this smaller fixed part and the scroll work only in the largest 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 in the smaller part of the page. Notice in the images that when I click on the local item on the side it directs the page to the respective location but the items are in the same place as the page... 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>

html angularjs

  • Post photos and parts of the code to make it clearer.

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 the scroll:

.class2 {
    overflow:hidden;
}

Just change the class name to be the same as the one you use.

Note: if you use position:fixed; it is good to be aware of the need to also use a z-index, as some elements may be superimposed on each other.

  • I put these classes in the grid div? for example: <div class="col col-33 fixed"> (fixed is the class name) in css put exactly as you suggested only changed the name to fixed...

  • Yes. It actually depends on your layout, but I think it works. If it doesn’t work, update your question and post your html/css code to analyze it better.

  • Beauty, updated.

  • Didn’t work? Check for structure and syntax errors. Note that your css is written positionf and not position. Also, inside your fixed class div, you have div closing tags where you don’t need them. Organize this and see if it works.

  • Yes everything is organized already, but still not working...

  • You know which is the property of the menu bar that makes it always accompany the page?

  • @Matheusd is the one I gave you. It will leave your element "fixed" on the page. I will try to put together a structure with your code and I will return to you

Show 2 more comments

Browser other questions tagged html angularjs

You are not signed in. Login or sign up in order to post.