如何停止我的应用程序的Sticky标头的水平滚动

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

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

或者你可以在这里找到一个例子

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

Answer 2

代码清理我对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 3

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

.card-header {

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

}