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

时间:2016-10-13 08:34:34

标签: html css scroll

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

我正在设计一个基于行/通道内容的页面。 每行都有多个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容器中的原因是稍后整个画布变得动态和交互。内容将动态生成,用户可以通过拖放等方式与画布进行交互。

非常感谢你的帮助,提前谢谢!

2 个答案:

答案 0 :(得分:0)

嗨,你需要使用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();

答案 1 :(得分:0)

好的,我有点找到了解决方案,感谢: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确实支持。