Question

以下显示了我的应用程序的布局： http://jsfiddle.net/rhgyLjvx/

它有app主标题（红色），粘段标题（深蓝色），固定页脚（灰色）和固定左侧导航（绿色）。应用程序应在两侧都有完整的滚动条。并且应仅滚动主要部分（黄色）。

垂直滚动按我的意愿发生。但是粘段标题（深蓝色）与该部分水平滚动。

有没有办法让粘性标题固定在左侧和右侧并停止向侧面滚动？

我有另一个大问题。我的整个应用程序在包括固定位置div的设备中滚动。请检查移动模拟器。

＆＃13;

Array.from(document.querySelectorAll('.Sticky')).forEach((stickyEl) => {
console.log("&&&&&&&&&&&&&&&&&&& ", stickyEl)
	Stickyfill.add(stickyEl);
});

＆＃13;

#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;
}

＆＃13;

    <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>

＆＃13;

Answer 1

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

或者你可以找到一个例子here

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

Answer 2

代码清理 我修改了HTML，因为它看起来有很多嵌套的DIVS，它不能用于任何目的
还有对CSS中没有的类的引用，JavaScript（jQuery）并没有为任何目的服务（不是你提供给我们的内容）

预览代码我在更大的预览窗口中查看了代码并且工作正常，您需要更改CSS以反映您想要的高度。

＆＃13;

class VideoPlayerViewController: UIViewController {
    var player: AVPlayer!
    var playerLayer: AVPlayerLayer!

    let videoView: UIView = {
       let vidView = UIView()
       return vidView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        playerLayer = AVPlayerLayer(player: player)

        videoView.layer.addSublayer(playerLayer)

        view.addSubview(videoView)

        videoView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(true)
        playerLayer.frame = view.bounds
        self.view.layer.addSublayer(playerLayer)
        player!.play()
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        playerLayer.frame = view.bounds
    }

    override func viewDidDisappear(_ animated: Bool) {
        player!.pause()
        player = nil
        playerLayer.removeFromSuperlayer()
    }
}

＆＃13;

#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;
}

＆＃13;

Answer 3

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

.card-header {

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

}

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

3 个答案: