如何将页脚ID偏移到固定位置的底部

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将页脚ID偏移到固定位置的底部相关的知识,希望对你有一定的参考价值。

当前,此代码将偏移量应用于'#fixed'ID固定元素

我不知道如何应用相同的效果以将#footer ID设置为固定的底部位置

由于变换创建了新的局部坐标系(W3C Spec),位置:fixed固定到滚动条内容容器的原点,即左侧:0,顶部:0点。

因此,您可能需要注册滚动侦听器并将偏移量应用于固定元素。

有人可以提供任何建议吗?

下面的代码:

var fixedElem = document.getElementById('fixed');

var scrollbar = Scrollbar.init(
  document.getElementById('scroll'),
);

scrollbar.addListener(function(status) {
   var offset = status.offset;
  
  fixed.style.top = offset.y + 'px';
  fixed.style.left = offset.x + 'px';
});
#scroll {
  width: 500px;
  height: 500px;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: skyblue;
  text-align: center;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: skyblue;
  text-align: center;
}

#fixed h1, #footer h1 {
  margin: 0;
}

#content {
  padding-top: 20px;
  background: orange;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
  <main id="scroll">
    <header id="fixed">
      <h1>A fixed header</h1>
    </header>
    <article id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
      <p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
      <p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
      <p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
      <p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
      <p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
      <p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
      <p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
      <p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
      <p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
    </article>
     <footer id="footer">
       <h1>A fixed footer</h1>
     </footer>
     </main>
   
</body>
</html>
答案

实际上bottom: 0正在执行其工作。它锚定在滚动文章的底部,但是您希望锚定在主体的底部。

var fixedElem = document.getElementById('fixed');

var scrollbar = Scrollbar.init(
  document.getElementById('scroll'),
);

scrollbar.addListener(function(status) {
  var offset = status.offset;

  fixed.style.top = offset.y + 'px';
  fixed.style.left = offset.x + 'px';

  footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
});
#scroll {
  width: 500px;
  height: 500px;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: skyblue;
  text-align: center;
}

#footer {
  position: fixed;
  top: 463px;
  left: 0;
  width: 100%;
  background: skyblue;
  text-align: center;
}

#fixed h1,
#footer h1 {
  margin: 0;
}

#content {
  padding-top: 20px;
  background: orange;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>

<body>
  <main id="scroll">
    <header id="fixed">
      <h1>A fixed header</h1>
    </header>
    <article id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
      <p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
      <p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
      <p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
      <p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
      <p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
      <p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
      <p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
      <p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
      <p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
    </article>
    <footer id="footer">
      <h1>A fixed footer</h1>
    </footer>
  </main>

</body>

</html>

以上是关于如何将页脚ID偏移到固定位置的底部的主要内容,如果未能解决你的问题,请参考以下文章

如何将页脚固定在页面底部

如何将页脚固定在页面底部

javascript 将页脚固定到页面底部

将页脚放置在具有固定页眉的页面底部

仅在滚动到底部时将页脚固定到底部

将页脚推到短页面的底部