在 IE 中和页脚顶部设置 div 置顶

Question

我想让一个 div 粘在滚动上，但是当它总是停留在页脚的顶部时。

我尝试使用 position:sticky 效果很好，但它在 IE11 上不起作用。

我也针对类似问题尝试了多种解决方案，但他们总是指的是如何使页脚变粘，而不是主 <div> 内的另一个 <div>。

我的代码是这样的：

.slider {
  background: #006264;
  color: white;
  position: sticky;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

这里是 JSFiddle

我该如何解决这个问题？

Answer 1

遗憾的是，我不知道有任何 CSS-only 方法可以达到这样的效果。然而，当然，使用 JavaScript 和一些额外的 CSS 是可能的。我在示例中使用了jQuery，因为它更容易理解，但您当然可以将其转换为JS。

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
    $('.main').removeClass('fixed');
  } else {
    $('.main').addClass('fixed');
  }
});

$(window).scroll();

/* resets */

body {
  margin: 0px;
  padding: 0px;
}

.main.fixed>.slider {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.main.fixed~.footer {
  margin-top: 60px;
}

.slider {
  background: #006264;
  color: white;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

.placeholder {
  padding: 100px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main fixed">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider fixed">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

是的，它在 IE 中工作，因为 jQuery 仍然支持 IE9+。请记住，这是一个基本示例，您应该进行一些性能增强。

Answer 2

写几行 JavaScript 应该可以满足这个要求。如果我们应该根据当前 window 滚动位置设置子页脚 position: fixed 或 position: relative，我们可以将主页脚作为我们的指示器 - 这毕竟是 sticky ，即 fixed 和 relative.

的混合体

在我下面的解决方案中，一般优点是滚动事件侦听器仅在客户端使用 IE11 时启动。我发现 IE11 实际上删除了 DOM 上的 sticky 位置样式，因为它不支持它。

简而言之，现代浏览器仍将使用sticky，下面的代码只是在用户使用 IE11 时的备份。

<!-- place the style inline to cater the condition statement -->
<div class="slider" style="position: sticky;">

.slider {
  background: #006264;
  color: white;
  position: fixed; /* fixed is for the IE11 fallback */
  bottom: 0px;
  width: 100%;
  height: 60px;
}

// IE11 actually removes "sticky" from attribute "styles" value. So at this point we can control when to add an event listener (i.e., Modern browsers will still use position: sticky)
if (divFooter.style.position != "sticky") {
  window.addEventListener("scroll", function() {
    if (mainFooter.getBoundingClientRect().top - window.innerHeight <= 0) {
      divFooter.style.position = "relative";
      mainFooter.style.marginTop = "0";
    } else if (mainFooter.getBoundingClientRect().top - window.innerHeight > 0) {
      divFooter.style.position = "fixed";
      mainFooter.style.marginTop = divFooter.clientHeight.toString() + "px";
    }
  })
}

var divFooter = document.querySelector(".slider");
var mainFooter = document.querySelector(".footer");

// IE11 actually removes "sticky" from attribute "styles" value. So at this point we can control when to add an event listener (i.e., Modern browsers will still use position: sticky)
if (divFooter.style.position != "sticky") {
  window.addEventListener("scroll", function() {
    if (mainFooter.getBoundingClientRect().top - window.innerHeight <= 0) {
      divFooter.style.position = "relative";
      mainFooter.style.marginTop = "0";
    } else if (mainFooter.getBoundingClientRect().top - window.innerHeight > 0) {
      divFooter.style.position = "fixed";
      mainFooter.style.marginTop = divFooter.clientHeight.toString() + "px";
    }
  })
}

html,
body {
  margin: 0;
}

.placeholder {
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  height: 300px;
}

.slider {
  background: #006264;
  color: white;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider" style="position: sticky;">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

就纯 CSS 解决方案而言 - 这就是我所拥有的：您可以选择拥有 2 个滚动条。 1 个用于 body & 1 个用于 main - 我们可以隐藏水平滚动条以保持美观。

body {
  overflow-x: hidden;
}

.main {
  max-height: calc(100vh - 60px);
  overflow-y: scroll;
  width: 100vw;
}

html,
body {
  margin: 0;
}

.placeholder {
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  height: 300px;
}

.slider {
  background: #006264;
  color: white;
  /* position: sticky; */
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

body {
  overflow-x: hidden;
}

.main {
  max-height: calc(100vh - 60px);
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100vw;
}

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
</div>
<div class="slider">
  This is the footer
</div>
<div class="footer">This is the main footer</div>

您可以在下面找到 CSS 实现的内部工作原理，不包括滚动条的隐藏。这非常 hacky - 如果你能找到一种方法让滚动确定主体的优先级 on-scroll-up，那将最适合你的系统。

html,
body {
  margin: 0;
}

.placeholder {
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  height: 300px;
}

.slider {
  background: #006264;
  color: white;
  /* position: sticky; */
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

body {
  /* overflow-x: hidden; */
}

.main {
  max-height: calc(100vh - 60px);
  overflow-y: scroll;
  /* width: 100vw; */
}

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
</div>
<div class="slider">
  This is the footer
</div>
<div class="footer">This is the main footer</div>

Answer 3

如果您只想使用 CSS 解决方案并且可以 slider 在 IE 中保持固定，您可以使用 IE only 样式来设置 fixed 为 slider 设置位置 margin-bottom 为 footer.

html,
body {
  margin: 0;
}

.placeholder {
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  height: 300px;
}

.slider {
  background: #006264;
  color: white;
  position: sticky;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS */
  .slider {
    position: fixed;
  }
  .footer {
    margin-bottom: 60px;
  }
}

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

Answer 4

基于https://developer.mozilla.org/en-US/docs/Web/CSS/position，（参考文档末尾的浏览器兼容性）位置粘性似乎不受 IE11 支持。

所以您可能需要尝试使用样式的 Specificity Hierarchy 来完成。您可以指定您的 CSS 属性 - sticky 内联以具有更高的层次结构，如果不支持，则可以将其替换为较低的特异性层次结构 CSS 属性 .

此外，您可以为 Safari 添加以下代码。

.slider {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        bottom: 0;    
       }

Answer 5

您可以在 CSS 中使用 position: fixed。请随意复制：

<html>
    <head>
        <style>
            .sticky {
                position: fixed;/*this makes it work!*/
                width: 100vw;
                height: 10vh;
                text-align: center;
                background-color: green;
                bottom: 0px;
                color: white;
                font-size: 40px;
            }
            .body1 {
                height: calc(100vh - 80px);
                width: calc(100vw - 80px);
                border: 10px solid black;
                text-align: center;
                font-size: 100px;
            }
            .this {
                margin-bottom: 10vh;
                /*this is some style*/
            }
        </style>
    </head>
    <body>
        <div class="body1">content</div>
        <div class="body1">content</div>
        <div class="body1">content</div>
        <div class="body1">content</div>
        <div class="body1">content</div>
        <div class="body1">content</div>
        <div class="body1">content</div>
        <div class="body1 this">content</div>
        <div class="sticky">I am sticky!</div>
    </body>
</html>

Answer 6

因为 position: sticky 是 not supported by IE11 i would propose stickybits。

摘自 stickybits 文档：

Stickybits is a lightweight alternative to position: sticky polyfills. It works perfectly for things like sticky headers.

关于浏览器兼容性：

Stickybits works in all modern browsers including Internet Explorer 9 and above. Please file and issue with browser compatibility quirks.

基于您的示例 Fiddle。

在 IE 中和页脚顶部设置 div 置顶

make a div sticky in IE and in top of footer

html

css

internet-explorer-11

sticky