Question

我想制作侧边栏导航，其行为类似于position: sticky和position: fixed。
我无法制作具有动态高度的粘性元素。理想情况下，我只想用CSS来做。

侧边栏位于标题之后（未固定），我希望当您滚动标题时侧边栏会粘在浏览器的顶部（因此position: sticky非常适合）。 /> 但我希望侧边栏的底部始终位于浏览器视图的底部。像position: fixed一样。

到目前为止我的结果是以下片段：
如果您位于代码段的顶部，并且您在侧边栏的底部滚动，则项目18 仍然处于隐藏状态，因为侧边栏超出了视图范围。
如果您滚过主容器中的标题，侧边栏就可以了，因为它的大小为100vh。

我希望将bottom: 0;设置为粘性元素，将其固定在底部，但只有在我将粘性元素设置为position: fixed;时它才有效，然后它当然不会粘住在顶部。

＆＃13;

.header {
  background-color: grey;
  height: 30px;
}

.container {
  display: flex;
}

.nav {
  color: white;
  background-color: black;
  width: 7rem;
}

.sticky-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: scroll;
}

.content {
  background-color: #ccc;
  width: 100%;
}

＆＃13;

<div class="header">Header</div>

<div class="container">
  <div class="nav">
    <div class="sticky-nav">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
      <p>Item 6</p>
      <p>Item 7</p>
      <p>Item 8</p>
      <p>Item 9</p>
      <p>Item 10</p>
      <p>Item 11</p>
      <p>Item 12</p>
      <p>Item 13</p>
      <p>Item 14</p>
      <p>Item 15</p>
      <p>Item 16</p>
      <p>Item 17</p>
      <p>Item 18</p>
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.

Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.

Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.

Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.

Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.

Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.

Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.

Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.

Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
  </div>
</div>

＆＃13;

Answer 1

这是一个纯粹由css制作的答案。使用css的calc属性，您可以使用CSS轻松实现此功能。

＆＃13;

<div class="header">Header</div>

<div class="container">
  <div class="nav">
    <div class="sticky-nav">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
      <p>Item 6</p>
      <p>Item 7</p>
      <p>Item 8</p>
      <p>Item 9</p>
      <p>Item 10</p>
      <p>Item 11</p>
      <p>Item 12</p>
      <p>Item 13</p>
      <p>Item 14</p>
      <p>Item 15</p>
      <p>Item 16</p>
      <p>Item 17</p>
      <p>Item 18</p>
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.

Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.

Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.

Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.

Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.

Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.

Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.

Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.

Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
  </div>
</div>

＆＃13;

-(void)layoutSubviews{
   [super layoutSubviews];
   float height = 42.5;

   if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
       height = 48;

   }

   imageView.frame = CGRectMake(0, 0, [[UIScreen mainScreen]bounds].size.width, height);
   if(UI_USER_INTERFACE_IDIOM() ==UIUserInterfaceIdiomPad){

       if(@available(iOS 11.0,*)){
           self.frame =CGRectMake(0, 20,[[UIScreen mainScreen]bounds].size.width, 55); // this line provoke the infinite loop

           for(UIView *aView in self.subviews){
               if([NSStringFromClass([aView class]) isEqualToString: @"_UINavigationBarContentView"]){
                   aView.frame = CGRectMake(0, 10, aView.frame.size.width, aView.frame.size.height);
               }
               if([NSStringFromClass([aView class]) isEqualToString: @"_UIBarBackground"]){
                   aView.frame = CGRectMake(0, 0, aView.frame.size.width, self.frame.size.height );
               }

           }

       }
   }
}

＆＃13;

定位粘滞，但始终位于视口底部

1 个答案: