Блог

Главная - Вопросы по программированию - Липкий SVG, не плавающий в div, когда div использует display grid или flex

Липкий SVG, не плавающий в div, когда div использует display grid или flex

#css #flexbox #css-grid #sticky

#css #flexbox #css-grid #липкий

Вопрос:

Я пытаюсь создать липкое меню, используя SVG. Проблема, с которой я сталкиваюсь, заключается в том, что div после меню есть Display: grid ; из-за этого, несмотря на то, что sticky SVG работает, отображается пробел (который соответствует высоте SVG) перед div . Я заметил, что это происходит только в том случае, display grid or flexbox если я использую display: block ; sticky SVG перемещается правильным образом, а пробел не отображается.

Есть ли способ избежать отображения белой области в SVG и при этом иметь возможность использовать grid или flexbox? Я хочу, чтобы меню отображалось на всем сайте. Вот почему я не поместил это внутрь div.

Это CSS для 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;
  }
}

Это CSS-код Div после меню:

 .box {
    display: grid;
    grid-template-columns: auto auto auto;
    height: 1000px;
    width: 100%;
    background-color: aqua;
}

Это ручка с копией проекта

 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>

Ответ №1:

Проблема не в sticky, а в том, что вы используете float. Элемент float по умолчанию будет перекрывать элемент block, но это не будет в случае с flexbox и CSS grid.

Вот упрощенная версия вашей проблемы.

 .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>

Теперь, если вы удалите display:flex , у вас будет это:

 .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>

Приведенный выше код является предполагаемым результатом, но он не будет вести себя так, если мы удалим 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>

У вас есть два решения. Первый вариант — рассмотреть position:fixed вместо sticky, поскольку ваш элемент является первым элементом в DOM, и вы хотите, чтобы он был липким ко всему сайту.

 .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>

Или вы можете рассмотреть отрицательное поле в другом контейнере, равное высоте элемента sticky.

 .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>