如何解决仅当标题到达特定列时才如何修复列使用CSS网格？

外观上看起来像这样：

headerheaderheader
 mainmainmainmain
 col1col1col col2

我正在尝试在这里实现两件事：

向下滚动时，col2已在屏幕上固定。
仅在标题到达列时保持col2固定。这是固定的标题。

我尝试了adding position fixed/sticky，但在这种情况下似乎不起作用。该列将消失。我的React组件的结构如下：

<Header />
<Middleware />

//below is inside of Middleware
<main>
  <form className="booking-form"></form>
  <Selection/>
</main>

//below is inside of Selection
<div className="selection"></div>
<BookingDetail/>

//finally,inside of BookingDetail
<div className="booking-detail"></div>

这是我的html呈现时的样子：

<header> This is the fixed header </header>
<main class="form-container">
  <form class="booking-form"> takes up 100% horizontally </form> 
  <div class="selection"> takes up about 80% horizontally,below form </div>
  <div class="booking-detail"> takes up about 20% horizontally </div>
</main>

最后，css

.form-container {
   display: grid;
   grid-template-columns: repeat(24,1fr);
}
.booking-form {
   grid-column: 3 / span 20;   // takes up entirety of row,see 'main' above
}
.selection {                  //left column (col1)
   grid-column: 3 / span 15;
}
.booking-detail {             //right column (col2),which I need fixed when the header hits.
   display: block;             //display is block as at a smaller break point it's 'display: none;'
   grid-column: 19 / -2;
}

编辑： Kenan的答案非常有效，除了我一直试图解决的一个小错误。由于滚动代码，“选择”列中的内容（某些具有内部内容的div）的内容意外地调整了大小，我无法弄清楚如何解决它。这些是其内部内容（其中有很多）

<div className="business-and-timegrid-wrapper" key={index}>
   <Estabelecimento
      logoURL={item.logoURL}
      name={item.name}
      rating={item.rating}
      address={item.address}
    />
    {item && <TimeGridSelection item={item} date={dateForRenderingTimeGrid} />}
      </div>
------------------------------------
.business-and-timegrid-wrapper {
   padding: 1em;
   margin-bottom: -3vh;
   background-color: #fff;
   display: grid;
   grid-template-columns: repeat(2,50%);
   border: 1px #ECECEC solid;
   box-shadow: 0px 3px 6px #00000029;
   opacity: 1;
}

解决方法

更新

我不知道您对React有多少了解，但是会以您确实影响React应用程序的方式编写JS吗？

好吧，以我的方式编写JS仍可以在React中正常工作而没有任何问题。但是由于您使用的是React，因此会将所有内容都放入div元素（所谓的root）中，因此在某些情况下，它可能不适用于标题元素...

我创建了一个简单的React应用程序，并将所有内容（我最初发布的内容）放在了那里，并进行了相应的调整。不幸的是，我对React没有太多了解，但是基本上它应该使您了解如何使用React来实现。

原始答案

如果我对您的理解正确，那么仅凭CSS就无法实现这一目标（希望其他人可以证明我错了）；因此，您需要在这里获得JavaScript的帮助。

顺便说一句，通常不会用“头”包裹“主”。（请参阅HTML <main> Tag）。

尝试一下（请注意，在此示例中，我使用了简单的JavaScript，但是您可以根据自己选择的框架进行调整）：

JSFiddle：https://jsfiddle.net/od9jf4m7/

window.onload = function() {
    var pageHeaderElem = document.getElementById("page-header");
    var bookingDetailElem = document.getElementsByClassName("booking-detail")[0];
    var bookingDetailContentElem = document.getElementById("booking-detail-content");

    function checkBookingDetailContent() {
        bookingDetailContentElem.style.width = bookingDetailContentElem.parentElement.offsetWidth + 'px';
        bookingDetailContentElem.style.height = bookingDetailContentElem.parentElement.offsetHeight + 'px';
        if(bookingDetailElem.getBoundingClientRect().top < pageHeaderElem.offsetHeight) {
            if(!bookingDetailContentElem.classList.contains("fixed")) {
                bookingDetailContentElem.classList.add("fixed");
            }
        } else {
            bookingDetailContentElem.classList.remove("fixed");
        }
    }
    window.addEventListener("scroll",checkBookingDetailContent);
    window.addEventListener("resize",checkBookingDetailContent);
    checkBookingDetailContent();
}

* {
    box-sizing: border-box;
    color: #fff;
    padding: 0;
    margin: 0;
}

html,body {
    display: block;
    width: 100%;
    background: black;
    height: 200%;
}

#page-header {
    background: blue;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.form-container {
    display: flex;
    flex-direction: column;
    position: sticky;
}

.form-container .booking-form {
    background: red;
    height: 250px;
}

.form-container .col-wp {
    height: 500px;
    overflow: hidden;
}

.form-container .col-wp .selection {
    background: green;
    float: left;
    width: 80%;
    height: 100%;
}

.form-container .col-wp .booking-detail {
    width: 20%;
    height: 100%;
    float: right;
}

#booking-detail-content {
    background: orange;
    z-index: 1;
}

#booking-detail-content.fixed {
    position: fixed;
    top: 100px;
}

<html>
    <body>
    <header id="page-header">
        This is my header
    </header>
    <main class="form-container">
        <form class="booking-form">takes up 100% horizontally</form>
        <div class="col-wp">
            <div class="selection">takes up about 80% horizontally</div>
            <div class="booking-detail">
                <div id="booking-detail-content">
                    takes up about 20% horizontally
                </div>
            </div>
        </div>
    </main>
    </body>
</html>

绿色col（根据您的颜色）正在进行内部调整大小，我不知道为什么。我内在的许多div都会受到滚动代码的影响。我编辑了问题以反映这一点。

很抱歉，我没有考虑到虽然您最初使用CSS网格布局，但是我在解决方案中使用了flex布局。因此，这次我只使用了网格布局。由于我的上一个答案已被接受，所以我不想再碰它了，因此这里是第二个答案。

检查一下：

Stackblitz应用程序：https://react-sticky-stackoverflow-63876698-v2.stackblitz.io
Stackblitz编辑器（源代码）：https://stackblitz.com/edit/react-sticky-stackoverflow-63876698-v2?file=App.js

参考：

React: Forwarding Refs
CSS-Tricks: A Complete Guide to Grid
关于我创建的WinScrollEventWrapper.js：
- Stack Overflow: React.js best practice regarding listening to window events from components
- CSS-Tricks: Styling Based on Scroll Position
关于我创建的BookingDetailPortal.js：
- React: Portals

仅当标题到达特定列时才如何修复列使用CSS网格？

如何解决仅当标题到达特定列时才如何修复列使用CSS网格？

解决方法

更新

原始答案

相关推荐