I am trying to create a sticky menu using SVG. The issue I am having is that the div after the menu has Display: grid; because of this, eventhough the sticky SVG is working, is showing a white space (which corresponds to the height of the SVG) before the div. I noticed that this only happens if I use display grid or flexbox, if I use display: block; the sticky SVG floats the right way and the white space doesn't show.
Is there a way to avoid showing the white area from the SVG and still being able to use grid or flexbox? I want the menu to stick to the whole site. That's why I didn't put it inside the div.
This is the CSS of the sticky menu:
.circle {
position: sticky;
top: 0%;
opacity: 0;
animation: mymove 4s forwards;
float: left;
transform: scale(0.1);
}
@keyframes mymove {
5% {transform: translate(0, 130%) scale(0.5);
opacity: 1;
}
10% {
transform: translate(0, 40%) scale(0.5);
}
12% {transform: translate(0,130%) scale(0.5);
}
35% {transform: translate(350%,130%) scale(0.5);
}
100% {
transform:translate(350%,130%) rotate(300deg) scale(0.2);
opacity: 1;
}
}
This is the CSS of the Div after the menu:
.box {
display: grid;
grid-template-columns: auto auto auto;
height: 1000px;
width: 100%;
background-color: aqua;
}
This is a pen with a copy of the project
body {
margin: 0;
}
path:hover {
fill: yellow;
transform: translate(5% 5%);
transform-origin: 50% 50%;
transition-duration: 1s;
}
.box {
display: grid;
grid-template-columns: auto auto auto;
height: 1000px;
width: 100%;
background-color: aqua;
}
.inside-box {
background-color:#8f0606;
height: 500px;
width: 10rem;
margin: auto;
float: left;
}
.box2 {
height: 1000px;
width: 100%;
background-color: rgb(111, 0, 255);
}
.circle {
position: sticky;
top: 0%;
opacity: 0;
animation: mymove 4s forwards;
float: left;
transform: scale(0.1);
}
@keyframes mymove {
5% {transform: translate(0, 130%) scale(0.5);
opacity: 1;
}
10% {
transform: translate(0, 40%) scale(0.5);
}
12% {transform: translate(0,130%) scale(0.5);
}
35% {transform: translate(350%,130%) scale(0.5);
}
100% {
transform:translate(350%,130%) rotate(300deg) scale(0.2);
opacity: 1;
}
}
.plus {
opacity: 0;
animation: reveal 5s forwards;
}
@keyframes reveal {
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}<svg class="circle" width="341" height="341" viewBox="0 0 393 395" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" cx="197.5" cy="195.5" r="182.5"></circle>
<filter x="-4.1%" y="-4.1%" width="108.2%" height="108.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0.106884058 0 0 0 0 0.0827088718 0 0 0 0 0.0827088718 0 0 0 0.163925918 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<filter x="-3.7%" y="-3.7%" width="107.4%" height="107.4%" filterUnits="objectBoundingBox" id="filter-3">
<feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
<feGaussianBlur stdDeviation="1.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.105882353 0 0 0 0 0.0823529412 0 0 0 0 0.0823529412 0 0 0 0.111778846 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<path d="M226.888266,167.71921 L297.316815,167.71921 L297.316815,226.71921 L226.888266,226.71921 L226.888266,297.485871 L167.888266,297.485871 L167.888266,226.71921 L97.3168146,226.71921 L97.3168146,167.71921 L167.888266,167.71921 L167.888266,97.4858706 L226.888266,97.4858706 L226.888266,167.71921 Z" id="path-4"></path>
<filter x="-5.7%" y="-4.8%" width="111.5%" height="111.5%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Oval">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#AA3F02" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use stroke-opacity="0" stroke="#AA3F02" stroke-width="6" xlink:href="#path-1"></use>
</g>
<g class="plus" id="Rectangle-2" transform="translate(197.316815, 197.485871) rotate(60.000000) translate(-197.316815, -197.485871) ">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<path stroke="#3F1616" stroke-width="1" d="M226.388266,97.9858706 L168.388266,97.9858706 L168.388266,168.21921 L97.8168146,168.21921 L97.8168146,226.21921 L168.388266,226.21921 L168.388266,296.985871 L226.388266,296.985871 L226.388266,226.21921 L296.816815,226.21921 L296.816815,168.21921 L226.388266,168.21921 L226.388266,97.9858706 Z" stroke-linejoin="square" fill="#1D1639" fill-rule="evenodd"></path>
</g>
</g>
</svg>
<div class="box">
<div class="inside-box"></div>
<div class="inside-box"></div>
<div class="inside-box"></div>
</div>
<div class="box2"></div>
</div>The issue isn't with sticky but it's due to the float you are using. A float element will by default overlap block element but it won't be the case with flexbox and CSS grid.
Here is a simplified version of your issue.
.box {
display:flex;
width:100%;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
float:left;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}<div class="stick">
</div>
<div class="box">
</div>Now if you remove the display:flex you will have this:
.box {
width:100%;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
float:left;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}<div class="stick">
</div>
<div class="box">
</div>The above code is the intended result but it won't behave like this if we remove float
.box {
width:100%;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}<div class="stick">
</div>
<div class="box">
</div>You have two solutions. The first one is to consider position:fixed instead of sticky since your element is the first element in the DOM and you want it to be sticky to the whole site.
.box {
width:100%;
display:flex;
height:200px;
background:red;
}
.stick {
height:100px;
width:100px;
background:green;
position:fixed;
top:0;
}
body {
min-height:200vh;
margin:0;
}<div class="stick">
</div>
<div class="box">
</div>Or you can consider negative margin on the other container that is equal to the height of the sticky element.
.box {
width:100%;
display:flex;
height:200px;
background:red;
margin-top:-100px;
}
.stick {
height:100px;
width:100px;
background:green;
position:sticky;
top:0;
}
body {
min-height:200vh;
margin:0;
}<div class="stick">
</div>
<div class="box">
</div>