Ниже показан макет моего приложения: http://jsfiddle.net/rhgyLjvx/

Он имеет основной заголовок приложения (красный), липкий заголовок раздела (темно-синий), фиксированный нижний колонтитул (серый) и фиксированную навигацию левой стороны (зеленый). Приложение должно иметь полные полосы прокрутки с обеих сторон. И следует прокручивать только основной раздел (желтый).

Вертикальная прокрутка происходит как я хочу. Но липкий заголовок раздела (темно-синий) горизонтально прокручивается вместе с разделом.

Есть ли способ закрепить липкий заголовок слева и справа и остановить прокрутку вбок?

У меня есть еще одна большая проблема. Все мое приложение прокручивается на устройствах, включая div с фиксированной позицией. Пожалуйста, проверьте в мобильном эмуляторе.

Array.from(document.querySelectorAll('.Sticky')).forEach((stickyEl) => {
console.log("&&&&&&&&&&&&&&&&&&& ", stickyEl)
	Stickyfill.add(stickyEl);
});
#root, body, html {
    height: 100%;
    width: 100%;
}
    
    .app {
    height: 100%;
    width: 100%;
}

.main {
    padding-top: 70px;
    height: 100%;
    box-sizing: border-box;
}

.header {
    width: 100%;
    float: left;
    min-height: 70px;
    max-height: 70px;
    background-color:red;
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
	z-index: 999; 
}
.sidenav {
  background-color:green;
    width: 250px;
    float: left;
    overflow-y: auto;
    position: fixed;
    height: 100%;
	z-index: 999; 
}

.landing {
    height: 100%;
    background-color: black;
    position: absolute;
    left: 250px;
}

.content {
    padding: 5px;
    height: 100%;
	background-color: grey;
}
.view {
    width: 100%;
   background-color: aqua;
}
.page-header {  
    
    background-color: #0c004a;
    height: 50px;
    z-index: 999;   
    position: sticky;
    top: 70px;
    right: 0;
    left: 250px;
    margin-left: 5px;
    margin-right: 5px;
}

.page-section {
    flex: 0 1 auto;
    
    margin-bottom: 50px;
     background-color: purple;
}
.page-content {
    width: 100%;
    background-color: pink;
}

.page-panel {
    display: block;    
    background-color: yellow;
    margin-bottom: .5rem;
    width: 75rem;
    min-height: 43.8rem;
}

.page-footer {
    height: 50px;
    background-color: #979797;
    opacity: 1;    
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 250px;
}
    <div id="root">
      <div class="app">
        <header id="app-header" class="header"></header>
          <div class="main">
            <nav id="side-nav" class="sidenav"></nav>
            <div class="landing">
              <div class="content">
                <div id="adeb-maint" class="view">
                  <div class="Sticky page-header"></div>
                    <div class="page-section">
                    <div class="page-content">
                      <div class="page-panel" style="width: 75rem; min-height:       43.8rem;">
                        <label>Customer WWDSSD:</label>
                        <label style="margin-top: 750px;display: block;">Last Change  skdjskdq   :</label>
                      </div>
                    </div>
                   </div>
                   <div class="page-footer">
                      <div class="actions-bar">
                        <button name="OK" class="ok">OK</button>
                        <button name="Cancel" class="cancel">Cancel</button>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div> 
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.0.3/stickyfill.min.js"></script>
0
user4152111 5 Мар 2018 в 02:22

3 ответа

Лучший ответ

Очистка кода Я изменил HTML, так как в нем было много вложенных DIVS, которые не служили какой-либо цели

Также были ссылки на классы, которых не было в вашем CSS, JavaScript (jQuery) не служил какой-либо цели (не для контента, который вы нам предоставили)

Код предварительного просмотра . Я просмотрел код в большом окне предварительного просмотра и работает нормально. Вам нужно будет изменить CSS, чтобы отразить желаемую высоту.

#root, body, html {
  width: 100%;
  margin: 0
}
header {
  background-color:red;
  position: fixed;
  width: 100%;
  min-height: 70px;
  max-height: 70px;
  box-sizing: border-box;
  padding: 20px;
  z-index: 2; 
}

.pro-main {
  padding-top: 70px;
  box-sizing: border-box;
}

nav {
  background-color:green;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  width: 250px;
  z-index: 2; 
}

.pro-landing {
  position: absolute;
  left: 250px;
  background: #979797;
  padding: 5px;

}

.objectview {
  width: 100%;
  background-color: aqua;
}

.card-header {  
  background-color: #0c004a;
  position: fixed;
  top: 70px;
  height: 50px;
  width: 100% ;
  z-index: 5;
  border-top: 5px solid #979797;
}

.card-section {
  margin-bottom: 50px;
  width: 100%;
}


.card-panel {
  display: block;    
  background-color: yellow;
  margin-bottom: .5rem;
  padding-top: 50px;
  width: 75rem;
  min-height: 43.8rem;
}

.card-footer {
  background-color: #979797;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 250px;
  height: 50px;
  text-align: right;
  line-height: 3em;
  padding-right: 1ex;
}
<div id="root">
  <header id="app-header" class="pro-header"></header>
<div class="pro-main">
    <nav id="side-nav"></nav>
    <div class="pro-landing">
      <div id="deb/m10mast/debtor-maint" class="objectview">
          
          <div class="card-section">
<div class="card-header"></div>
        <div class="card-panel" style="width: 75rem; min-height:       43.8rem;">
        

              <label>Customer WWDSSD:</label>
              <label style="margin-top: 750px;display: block;">Last Change  skdjskdq   :</label>
            </div>
          </div>
          <div class="card-footer">
            <div>
              <button name="OK" class="ok">OK</button>
              <button name="Cancel" class="cancel">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
0
DataCure 5 Мар 2018 в 02:05

Вам нужно узнать о CSS-отображении: flex et al. Учебное пособие

Или вы можете найти пример здесь

Настоящий бонус здесь - это изменение размера страницы и ориентации.

0
McMurphy 4 Мар 2018 в 23:36
 /* You just need to update it like following */
 .card-panel
 {
position: absolute;
}

.card-header {

position: fixed;
top: 78px;
right: 0;
left: 254px;

}
0
Roopesh 5 Мар 2018 в 06:00