Köşeli Materyaller - md içerikli kaydırmadan sonra altbilgi

Şu anda Angular Materials kullanarak bir uygulama tasarlıyorum, ancak bir yerleşim sorunuyla karşılaştım. App bir yapışkan başlık ile ikiye bölünür. Sol taraf kaydırılmaz, ancak sağ taraf kaydırılır. Sağ taraftaki içerikte ilerliyor ve sonuna ulaşıyorsanız, ENTIRE sayfası daha sonra bir altbilgi görüntülemek için ilerler.Köşeli Materyaller - md içerikli kaydırmadan sonra altbilgi

Çok sayıda kombinasyon denedim, ancak istenen sonucu alamıyorum. Herhangi bir yardım Kaydırma önce

takdir: Before Scrolling

sonuna gidin sonra: After scrolling to the end

Güncel kodu:

<body layout="column"> 

<md-toolbar> 
    <h2 class="md-toolbar-tools"> 
     <md-button class="md-raised">Sign In</md-button> 
    </h2> 
</md-toolbar> 

<div ng-controller="LandingController" layout="row"> 

     <!-- Left Side --> 
     <div flex class="search-background" layout ="row" layout-align="center center"> 
      <md-input-container layout="row"> 
       <label>Something</label> 
       <input ng-model="airport"> 
      </md-input-container> 
      <md-button>Search</md-button> 
     </div> 

     <!-- Right Side --> 
     <md-content flex layout-padding> 
      <p> Text that overflows </p> 
     </md-content> 
</div> 

<!-- Where do I put the footer/format the layout --> 

<script type="text/javascript" src="js/app/all.min.js"></script>

kaynak

2016-03-18 Sim

Gerçekten istenen sonucu hakkında bilgi vermedi. Pencerenin altında her zaman görülebilen yapışkan bir altbilgi mi yoksa ...? – Lex

Sağ kaydırma kısmının tamamlanmasından sonra görünen ve sonra kaydırılabilir olmayan sol tarafın sol üst köşesinde görünen bir altbilgi istiyorum. Açık olmadığım için üzgünüm. – Sim

Ben benzer bir şey için jsfiddle var Bunun için umarım işe yarar. Aynı güncelleme yapmaktan çekinmeyin.

jsFiddle

<body ng-app="layout" ng-controller="AppCtrl"> 
    <div layout="row" flex> 
    <div layout="column"> 
     <md-toolbar md-whiteframe="2"> 
     <div class="md-toolbar-tools"> 
      <span>Material header</span> 
      <span flex></span> 
     </div> 
     </md-toolbar> 
    </div> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <div class="content-section" flex> 
     Should not scroll 
     </div> 
    <div class="content-section" flex> 
     <div class="text-center"> 
     <br/><br/><br/><br/><br/><br/><br/> 
     This Scroll 
     <br/><br/><br/><br/><br/><br/><br/> 
     This Scroll 
     <br/><br/><br/><br/><br/><br/><br/> 
     This Scroll 
     <br/><br/><br/><br/><br/><br/><br/> 
     This Scroll 
     <br/><br/><br/><br/><br/><br/><br/> 
     This Scroll 
     <br/><br/><br/><br/><br/><br/><br/> 
     </div> 
     </div> 
    </div> 
    <div layout="row" flex> 
    <div layout="column"> 
     <md-toolbar md-whiteframe="2"> 
     <div class="md-toolbar-tools"> 
      <span>Material footer</span> 
      <span flex></span> 
     </div> 
     </md-toolbar> 
    </div> 
    </div> 
</body>

CSS

html, 
body { 
    overflow: hidden; 
} 

[ng\:cloak], 
[ng-cloak], 
[data-ng-cloak], 
[x-ng-cloak], 
.ng-cloak, 
.x-ng-cloak { 
    display: none !important; 
} 

.content-section { 
    height: calc(100vh - 128px)!important; 
    overflow-y: auto; 
}

kaynak

2016-03-19 00:38:38 Rahul

Tam olarak aradığım şey değil. Sanırım benim durumum sayfa ikiye ayrıldı. – Sim

bunu deneyin http://jsfiddle.net/rahulchaturvedie/mybf7fsq/38/embedded/ – Rahul

Çok yakın, ancak altbilgi sadece kaydırma bittikten sonra görünmelidir. Sürekli çaba için teşekkürler! – Sim

Köşeli Materyaller - md içerikli kaydırmadan sonra altbilgi

cevap

İlgili konular