如何停止我的应用程序的粘性标题的水平滚动

Question

以下显示了我的应用程序的布局： 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>

Answer 1

代码清理 我已经修改了 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>

Answer 2

您需要了解 CSS 显示：flex 等。 Tutorial

或者你可以找一个例子here

这里真正的好处是为您处理页面大小和方向更改。

Answer 3

 /* You just need to update it like following */
 .card-panel
 {
position: absolute;
}

.card-header {

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

}