Question

如何创建一个主要内容始终可见固定底部的页脚以及隐藏在下方的额外内容，仅在滚动到底部后可见。使用css。

＆＃13;

<html>
  <head>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer>
      primary content - this should be visible always (fixed) [copyright, logo etc.]
      ...
      extra content - initially hidden this should be visible only  when scrolled to bottom [extra links, careers link, policies link etc.]
    </footer>
  </body>
</html>

＆＃13;

Answer 1

如果您只想要一个CSS / HTML解决方案（没有JavaScript），那么您可以使用position:sticky。为此，您必须在main元素的末尾插入要始终显示的段落：

<html>
<head>
<style>
body{
margin:0
}
#alwayshow{
position:sticky;
bottom:0;
display:block;
background:#000;
color:#fff;
padding:2px;
}
</style>
</head>
<body>
<header></header>
<main>
<div>
content goes here ...
</div>
<div id="alwayshow">primary content - this should be visible always (fixed) [copyright, logo etc.]</div>
</main>
<footer>
extra content - initially hidden this should be visible only  when scrolled to bottom [extra links, careers link, policies link etc.]
</footer>
</body>
</html>

请注意，粘性位置相对较新。

如何创建一个固定页脚，主要内容可见，下面隐藏额外内容，只有在用css滚动到底部后才能看到

1 个答案: