两行粘顶

Question

I've tried many different ways to have two rows become sticky-top and I just can't seem to have any success with it. 我已经尝试了许多不同的方法来使两行变为粘性状态，但似乎似乎没有任何成功。

Here is what I currently have: 这是我目前拥有的：
Default : 默认值 ：

Sticky-top : 粘顶式 ：

Problem: How do I make the Junior/Mid/Senior row also be a sticky top but have it below the 'Core Competencies'? 问题：如何使“初中/中/高级”行也成为粘性顶部，但在“核心能力”之下？ When I apply a sticky top to the second row, it displays above. 当我将粘性顶部应用于第二行时，它显示在上方。

Correct : Both rows to be sticky-top without overlapping each other. 正确：两行都应置顶而不相互重叠。

Please run the below code to view the problem . 请运行以下代码以查看问题 。

 .heading { background-color: #00C6D7; } h4, h6 { margin-bottom: 0px; } .container { box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15); } span { font-size: smaller; } .col-md-3 { padding-top: .6rem!important; padding-bottom: .6rem!important; } .col-md-2 { display: flex; justify-content: center; align-items: center; } .bl { border-left: 1px solid lightgray; } .bb { border-bottom: 1px solid #00C6D7; } .bg-white { background-color: white; } .mainText { font-style: italic; color: #00C6D7; } .bg-fhdark { background-color: #5E6A71; } .title { color: #A2AD00; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="py-5"> <div class="container"> <div class="row sticky-top"> <div class="col-md-10 text-white text-left py-2 heading"> <h4 class="text-uppercase font-weight-bold">Core Competencies</h4> <span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority. Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills. The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations. Each area is outlined at the junior, mid and senior level. </span> </div> <div class="col-md-2 text-center py-2 heading"> <img style="width: inherit" src="" /> </div> </div> <div class="row bg-white"> <div class="col-md-3"></div> <div class="col-md-3 bl"> <h6 class="text-uppercase font-weight-bold title">Junior</h6> <span>Valued Colleague and Practitioner</span> </div> <div class="col-md-3 bl"> <h6 class="text-uppercase font-weight-bold title">Mid</h6> <span>Trusted Colleague; Proven and Creative Practitioner</span> </div> <div class="col-md-3 bl text-left"> <h6 class="text-uppercase font-weight-bold title">Senior</h6> <span>Trusted Client Advisor and Partner; Proven Agency Leader</span> </div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Client</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Client Focus, Strategic Counsel and Consultancy</span> </div> <div class="col-md-3 bl bb">1</div> <div class="col-md-3 bl bb">1</div> <div class="col-md-3 bl bb">1</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Integrated Strategy and Account Management</span> </div> <div class="col-md-3 bl bb">2</div> <div class="col-md-3 bl bb">2</div> <div class="col-md-3 bl bb">2</div> </div> <div class="row"> <div class="col-md-3"> <span>Creativity and Innovation</span> </div> <div class="col-md-3 bl">3</div> <div class="col-md-3 bl">3</div> <div class="col-md-3 bl">3</div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Talent</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Manage Full Talent LifeCycle</span> </div> <div class="col-md-3 bl bb">4</div> <div class="col-md-3 bl bb">4</div> <div class="col-md-3 bl bb">4</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Professional Development/Developing and Empowering</span> </div> <div class="col-md-3 bl bb">5</div> <div class="col-md-3 bl bb">5</div> <div class="col-md-3 bl bb">5</div> </div> <div class="row"> <div class="col-md-3"> <span>Self-Leadership</span> </div> <div class="col-md-3 bl">6</div> <div class="col-md-3 bl">6</div> <div class="col-md-3 bl">6</div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Business Development and Growth</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>New Business Strategy</span> </div> <div class="col-md-3 bl bb">7</div> <div class="col-md-3 bl bb">7</div> <div class="col-md-3 bl bb">7</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Prospecting</span> </div> <div class="col-md-3 bl bb">8</div> <div class="col-md-3 bl bb">8</div> <div class="col-md-3 bl bb">8</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>New Business Pitch Preparation, Participation and Leaderhip</span> </div> <div class="col-md-3 bl bb">9</div> <div class="col-md-3 bl bb">9</div> <div class="col-md-3 bl bb">9</div> </div> <div class="row"> <div class="col-md-3"> <span>Organic Growth</span> </div> <div class="col-md-3 bl">10</div> <div class="col-md-3 bl">10</div> <div class="col-md-3 bl">10</div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Finance and Operations</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Financial Management of Accounts (Account Profitability, Realization, Budgets)</span> </div> <div class="col-md-3 bl bb">11</div> <div class="col-md-3 bl bb">11</div> <div class="col-md-3 bl bb">11</div> </div> <div class="row"> <div class="col-md-3"> <span>Staffing and Resource Planning</span> </div> <div class="col-md-3 bl">12</div> <div class="col-md-3 bl">12</div> <div class="col-md-3 bl">12</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

Answer 1

Couldn't you just put the other div into the sticky element? 您不能将另一个div放入sticky元素中吗？

like this, 像这样，

 body { background: #f2f2f2; } .heading { background-color: #00C6D7; } h4, h6 { margin-bottom: 0px; } .container { box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15); } span { font-size: smaller; } .col-md-3 { padding-top: .6rem!important; padding-bottom: .6rem!important; } .col-md-2 { display: flex; justify-content: center; align-items: center; } .bl { border-left: 1px solid lightgray; } .bb { border-bottom: 1px solid #00C6D7; } .bg-white { background-color: white; } .mainText { font-style: italic; color: #00C6D7; } .bg-fhdark { background-color: #5E6A71; } .title { color: #A2AD00; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="py-5"> <div class="container"> <div class="row sticky-top"> <div class="col-md-10 text-white text-left py-2 heading"> <h4 class="text-uppercase font-weight-bold">Core Competencies</h4> <span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority. Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills. The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations. Each area is outlined at the junior, mid and senior level. </span> </div> <div class="col-md-2 text-center py-2 heading"> <img style="width: inherit" src="" /> </div> <div class="col-md-12"> <div class="row bg-white"> <div class="col-md-3"></div> <div class="col-md-3 bl"> <h6 class="text-uppercase font-weight-bold title">Junior</h6> <span>Valued Colleague and Practitioner</span> </div> <div class="col-md-3 bl"> <h6 class="text-uppercase font-weight-bold title">Mid</h6> <span>Trusted Colleague; Proven and Creative Practitioner</span> </div> <div class="col-md-3 bl text-left"> <h6 class="text-uppercase font-weight-bold title">Senior</h6> <span>Trusted Client Advisor and Partner; Proven Agency Leader</span> </div> </div></div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Client</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Client Focus, Strategic Counsel and Consultancy</span> </div> <div class="col-md-3 bl bb">1</div> <div class="col-md-3 bl bb">1</div> <div class="col-md-3 bl bb">1</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Integrated Strategy and Account Management</span> </div> <div class="col-md-3 bl bb">2</div> <div class="col-md-3 bl bb">2</div> <div class="col-md-3 bl bb">2</div> </div> <div class="row"> <div class="col-md-3"> <span>Creativity and Innovation</span> </div> <div class="col-md-3 bl">3</div> <div class="col-md-3 bl">3</div> <div class="col-md-3 bl">3</div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Talent</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Manage Full Talent LifeCycle</span> </div> <div class="col-md-3 bl bb">4</div> <div class="col-md-3 bl bb">4</div> <div class="col-md-3 bl bb">4</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Professional Development/Developing and Empowering</span> </div> <div class="col-md-3 bl bb">5</div> <div class="col-md-3 bl bb">5</div> <div class="col-md-3 bl bb">5</div> </div> <div class="row"> <div class="col-md-3"> <span>Self-Leadership</span> </div> <div class="col-md-3 bl">6</div> <div class="col-md-3 bl">6</div> <div class="col-md-3 bl">6</div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Business Development and Growth</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>New Business Strategy</span> </div> <div class="col-md-3 bl bb">7</div> <div class="col-md-3 bl bb">7</div> <div class="col-md-3 bl bb">7</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Prospecting</span> </div> <div class="col-md-3 bl bb">8</div> <div class="col-md-3 bl bb">8</div> <div class="col-md-3 bl bb">8</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>New Business Pitch Preparation, Participation and Leaderhip</span> </div> <div class="col-md-3 bl bb">9</div> <div class="col-md-3 bl bb">9</div> <div class="col-md-3 bl bb">9</div> </div> <div class="row"> <div class="col-md-3"> <span>Organic Growth</span> </div> <div class="col-md-3 bl">10</div> <div class="col-md-3 bl">10</div> <div class="col-md-3 bl">10</div> </div> <div class="row py-1 bg-fhdark"> <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Finance and Operations</div> </div> <div class="row"> <div class="col-md-3 bb"> <span>Financial Management of Accounts (Account Profitability, Realization, Budgets)</span> </div> <div class="col-md-3 bl bb">11</div> <div class="col-md-3 bl bb">11</div> <div class="col-md-3 bl bb">11</div> </div> <div class="row"> <div class="col-md-3"> <span>Staffing and Resource Planning</span> </div> <div class="col-md-3 bl">12</div> <div class="col-md-3 bl">12</div> <div class="col-md-3 bl">12</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

两行粘顶

问题描述

1 个解决方案

解决方案1
0 2018-12-21 15:10:07

两行粘顶

问题描述

1 个解决方案

解决方案1 0 2018-12-21 15:10:07

解决方案1
0 2018-12-21 15:10:07