Question

我已将position：sticky应用于文章标题元素，但它无效。

header {
 width: 25%;
 float: left;
 top: 0;
 position: sticky; 
 }

codepen在这里http://codepen.io/cssgrid/pen/7a86f94c7d581f913c43a0c7b512ddb0?editors=1100

Answer 1

这是因为.thousand中的浮动元素未被清除，.thousand的高度为0（除了它的边距）。所以header没什么可粘的。

我制作了.thousand inline-block的内容，这样您就不必清除花车，这似乎有效。

* {
  box-sizing: border-box;
}

.hero_img {
  height: 50vh;
  width:  100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.thousand {
  max-width: 1000px;
  margin: 0 auto;
  clear: both;
  margin-top: 2.5em;
  padding-top: 2.5em;
}

header {
  width: 25%;
  display: inline-block;
  top: 0;
  position: sticky; 
  vertical-align: top;
}

p {
  width: 75%;
  display: inline-block;
}

<div class="hero_img"></div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
    aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
    ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

或者，您可以通过从.thousand内部的float元素（较高的元素）中删除p并将其浮动header（较短的一个）来为* { box-sizing: border-box; } .hero_img { height: 50vh; width: 100%; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg); background-size: cover; background-position: center; background-attachment: fixed; } .thousand { max-width: 1000px; margin: 0 auto; clear: both; margin-top: 2.5em; padding-top: 2.5em; } header { width: 25%; float: left; top: 0; position: sticky; } p { width: 75%; display: inline-block; }提供高度元件）

<div class="hero_img"></div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
    aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
    ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

<div class="thousand">
  <header>
    <h2>Some Article Title</h2>
    <h3>12th January 2017</h3>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
    iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>

    MyTest.h

namespace MyTest {

public ref class TestClass
{

public:
    HMODULE module;
    String^ version;

    void TestMethod()
};
}

我无法获得位置粘性以处理标题

1 个答案: