0
votes

Contenu fixe dans la colonne déroulante

J'ai deux colonnes déroulantes séparément sur ma page. Sur la colonne de gauche qui a un rôle de navigation, j'ai deux sous-éléments qui peuvent tous faire défiler ensemble pour le moment:

 <div class="row">
    <div class="col-3 theme-background left-panel nav-scroll">
      <p> a - this part I want to be fixed <p>
    <div>
      <p> b - this part is scrollable  </p>
    </div>
    </div>

    <div class="col-9 nav-scroll">
      <p> c - scrollable as well<p>
    </div>   
 </div>

la vue générale est présentée dans le jfiddle ci-dessous:

https://jsfiddle.net/macfol/wtx9zhsq/

Ce que je que l'on souhaite réaliser est d'avoir la partie inférieure (b) pour pouvoir faire défiler tout en ayant la partie supérieure (a) à fixer sur le dessus de la colonne et toujours visible par l'utilisateur.

html bootstrap-4 scroll

0 commentaires

3 Réponses :

1
votes

Tout ce que vous avez à faire est de différencier le div scroll avec le div fixe et conservez le div fixe dans col-3

lien vers le violon

veuillez vérifier le lien

0 commentaires

0
votes

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
    <div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
      <p>
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
        
      </p>
</div>
    <div class="pScroll">
     <p>
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     </p>
    </div>
    </div>

    <div class="col-9 nav-scroll">
     <p>
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     </p>
    </div>

    
  </div>

.nav-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 90vh;
  float:left;
  bottom: 0;
  top:0;
}

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}
.pLeftBar {
  overflow: hidden;
}
.pFixed {
  height: 30%;
  overflow: hidden;
}
.pScroll {
  height: 70%;
  overflow-y: auto;
  overflow-x: hidden;
}

0 commentaires

0
votes

Quelque chose comme ça?

<body>

 <div class="head col-9" >  
 <p>
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
        
      </p>
     <p>
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     </p>
    </div>
   
    <div class="col-9 nav-scroll">
     <p>
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     </p>
    </div>
 
 </body>

.head{
  position: relative;
  background: #FFF;
  overflow-y: none;
  overflow-x: hidden;
  height: 20vh;
  z-index: 1;
}

.nav-scroll {
  position: relative;
  overflow-y: none;
  overflow-x: hidden;
  height: 90vh;
  float:left;
  margin 0 0 0 0;
}

body, html {
  margin: 0;
  padding 0;
  overflow-y: hidden;
  width: 350px;
  height:auto;
}

0 commentaires