Cancel a border-radius at a specific position

Question

I tried and I want to cancel the border radius of the class .title { border-radius: 0 } When the div hits its top position at 6.3vh.

I tried, searched, but I can't find anything that works. I tried with media queries and pseudo class without results..

Only with, css or sass \0/

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: auto;
  margin: 0 10vh;
  font-size: 3rem;
  background: red;
}

header {
  width: 100%;
  height: 6.3vh;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  top: 0;
  z-index: 4;
}

.header_title {
  background: blue;
}

main {
  width: 100%;
  background: green;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.image {
  width: 100%;
  height: 53.7vh;
  background: burlywood;
  position: sticky;
  top: 6.3vh;
  z-index: 1;
}

.title {
  background: purple;
  border-radius: 20px 20px 0 0;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.cards {
  background: pink;
  width: 100%;
  position: sticky;
  z-index: 2;
  top: 60vh;
  margin-bottom: 40vh;
  ;
}

footer {
  width: 1 height: 40vh;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  z-index: 3;
}

<div class="wrapper">
  <header>
    <div class="header_title">HEADER</div>
  </header>
  <main>
    <div class="image">IMAGE</div>
    <div class="title">MAIN</div>
    <div class="cards">
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
    </div>
  </main>
  <footer>
    FOOTER
  </footer>
</div>

look in the comments here: https://stackoverflow.com/questions/25308823/targeting-positionsticky-elements-that-are-currently-in-a-stuck-state — mwl, Mar 01 '23 at 14:50
Won't work without JS observing the elements scroll position. Unfortunately, there is no `sticky-hit-top-CSS-selector`. — Rene van der Lende, Mar 01 '23 at 14:50
@mwl , thanks looks good, I will try to adapt this css hack. I will let you know. Thx m8 — Brom, Mar 01 '23 at 15:55

Brom · Accepted Answer · 2023-03-07T12:28:36.947

Finally I found a trick to make it work. Thank you for your feedback.

:root {
  --radius_size: 20px;
  --negative_radius_size: calc(-1 * var(--radius_size));
}
  
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  background: red;
  height: auto;
  margin: 0 10vh;
  font-size: 2.5rem;
}

header {
  width: 100%;
  height: 6.3vh;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  top: 0;
  z-index: 2;
}

.header_title {
  background: blue;
}

main {
  background: green;
  width: 100%;
  padding: 0 1rem 1rem;
}

.image {
  background: burlywood;
  width: 100%;
  height: 30vh;
  position: sticky;
  top: 6.3vh;
}

.title {
  background: purple;
  width: 100%;
  height: calc(6.3vh - var(--radius_size));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius_size) var(--radius_size) 0 0;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.cancel_radius {
  background: lime;
  width: 100%;
  height: var(--radius_size);
  position: sticky;
  top: calc(6.3vh + var(--radius_size));
  transform: translateY(var(--negative_radius_size));
  z-index: 2;
}

.cards {
  background: pink;
  width: 100%;
  padding: 0 0 0 1rem;
  margin-top: var(--negative_radius_size);
  position: sticky;
  z-index: 1;
}

footer {
  width: 100%;
  background: grey;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: top;
}

<body>
    <div class="wrapper">

        <header>
            <div class="header_title">HEADER</div>
        </header>

        <main>
            <div class="image">IMAGE</div>
            <div class="title">MAIN</div>
            <div class="cancel_radius"></div>

            <div class="cards">
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
                <div class="card">CARD</div>
            </div>
        </main>
        
       <footer>
            FOOTER
       </footer>

    </div>

</body>

score -1 · Answer 2 · answered Mar 03 '23 at 10:05

$(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
        $('.title').addClass('border-radius');
    }
    else {
        $('.title').removeClass('border-radius');
    }
});

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: auto;
  margin: 0 10vh;
  font-size: 3rem;
  background: red;
}

header {
  width: 100%;
  height: 6.3vh;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  top: 0;
  z-index: 4;
}

.header_title {
  background: blue;
}

main {
  width: 100%;
  background: green;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.image {
  width: 100%;
  height: 53.7vh;
  background: burlywood;
  position: sticky;
  top: 6.3vh;
  z-index: 1;
}

.title {
  background: purple;
  border-radius: 20px 20px 0 0;
  position: sticky;
  top: 6.3vh;
  z-index: 3;
}

.cards {
  background: pink;
  width: 100%;
  position: sticky;
  z-index: 2;
  top: 60vh;
  margin-bottom: 40vh;
  ;
}

footer {
  width: 1 height: 40vh;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: top;
  position: sticky;
  z-index: 3;
}
.border-radius{border-radius:0!important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head></head>

<body><div class="wrapper">
  <header>
    <div class="header_title">HEADER</div>
  </header>
  <main>
    <div class="image">IMAGE</div>
    <div class="title">MAIN</div>
    <div class="cards">
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
      <div class="card">CARD</div>
    </div>
  </main>
  <footer>
    FOOTER
  </footer>
</div>
</body>

</html>

thx for your time, but only with css or sass, difficulty is there.... — Brom, Mar 04 '23 at 14:27

Cancel a border-radius at a specific position

2 Answers2