Question

我正在努力解决布局问题，我希望找到一些帮助来解决它。

我正在设计一个基于行/通道内容的页面。每行都有多个div元素和一些内容。因此，必须能够垂直和水平滚动行。

现在的问题是，每行内的第一个div元素有点像行标题，它提供了有关该行内容的一些描述。

我希望这个div元素在水平滚动期间始终保持可见。位置：fixed不是一个选项，因为它会阻止“row-header”在垂直滚动期间滚动其内容。

What it should look like during a horizontal scroll

以下是我的代码的小提琴：https://jsfiddle.net/rco56cbp/

html,
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
}
* {
    box-sizing: border-box;
}
header {
    background: #F7F7F7;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.50);
    /**/
    width: 100%;
    height: 90px;
    /**/
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 55;
    top: 0;
}

/* Left Sidebar */
.side-bar-bg {
    width: 130px;
    height: 100vh;
    z-index: -1;
    position: fixed;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
}

/* Wrapper around main content */
.content-container {
    margin-top: 110px;
    height:100%;
    position:absolute;
    width:100%;
} 

/* Content elements*/
.lane,
.lane-head,
.phase,
.lane-content {
    display: flex;
}
.lane {
    margin-bottom: 1.25em;
    //flex-direction: row;
    align-items: center;
}
.lane-head {
    min-width: 130px;
    background-color: #ffffff;
    box-shadow:0px 0px 0px 1px #BFC0C2 inset;
    /* Flex & Layout */
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    /**/
    margin-right: 1em;
}
.lane-label {
    font-weight: 500;
    font-size: 13px;
    color: rgba(82,94,106,0.65);
    line-height: 22px;
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
}
.lane-content {
    z-index: -3;
}
/* Grid System */
.col-1 {  min-width: 200px;     max-width: 200px;  }
.col-2 {  min-width: 420px;     max-width: 420px;  }
.col-3 {  min-width: 640px;     max-width: 640px;  }
.col-1, .col-2, .col-3 {  margin-right: 20px;  }

.textbox {
    padding: 0.7em 1em 1.5em 1em;
    color: #FFFFFF;
    min-width: 200px;
    max-width: 200px;
    background-color: #78BE20;
}
.phase {
    background: #005691;
    align-self: stretch;
    align-items: center;
    padding: 0.6em 1em;
}

/* Typo */
.phase {
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
}
.textbox h3 {
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 0.3em 0;
}
.textbox p {
    font-weight: normal;
    font-size: 13px;
    margin: 0 0;
}

<header>
    <h1>Header</h1>
</header>
<div class="side-bar-bg"></div>
<!------  CONTENT  ------>
<div class="content-container">
    <div class="lane">
        <div class="lane-head"><span class="lane-label">Small Boxes</span></div>
        <div class="lane-content">
            <div class="phase col-2">Lorem Ipsum</div>
            <div class="phase col-3">Bacon Ipsum</div>
            <div class="phase col-2">Egg Ipsum</div>
        </div>
    </div>
    <div class="lane">
        <div class="lane-head"><span class="lane-label">Bigger Boxes</span></div>
        <div class="lane-content">
            <div class="textbox col-1">
                <h3>Aenean commodo</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            </div>
            <div class="textbox col-1">
                <h3>Consequat</h3>
                <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
            </div>
            <div class="textbox col-1">
                <h3>Consequat</h3>
                <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
            </div>
            <div class="textbox col-1">
                <h3>Consequat</h3>
                <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
            </div>
            <div class="textbox col-1">
                <h3>Consequat</h3>
                <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
            </div>
            <div class="textbox col-1">
                <h3>Consequat</h3>
                <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
            </div>
            <div class="textbox col-1">
                <h3>Consequat</h3>
                <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
            </div>
        </div>
    </div>
</div>

固定的左侧边栏应作为“车道标题”的背景。

我希望lane-headers和lane-content位于一个div容器中的原因是稍后整个画布变得动态和交互。内容将动态生成，用户可以通过拖放等方式与画布进行交互。

非常感谢你的帮助，提前谢谢！

Answer 1

嗨，你需要使用javascript，一旦你向下或向上滚动添加一个类说posi_stat将是position：static。当你做水平滚动时只需删除该类。在默认情况下，它将是position：fixed。像这样的东西，你需要删除类，并添加滚动

$(function() {

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            //your code  , what should be done//
        }
    });
});

与.scrollBottom（）类似; .scrollRight（）; .scrollLeft（）;

Answer 2

好的，我有点找到了解决方案，感谢：Fixed position in only one direction in future releases of CSS?

虽然javascript解决方案对我不起作用（我仍然无法弄清楚原因），但CSS解决方案效果非常好。

通过在.lane-head类中添加以下行，问题得以解决：

left: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;

使用新的＆＃34;位置：粘性＆＃34;您可以将任何元素完美地粘贴在您想要的任何地方。不幸的是，Chrome仍然不支持此功能，但Safari和Firefox确实支持。

在水平滚动期间粘贴Div元素

2 个答案: