stackoom
  简体   繁体   中英

How to offset footer ID to fixed position bottom

 原文  2020-05-25 01:30:37  5   2    javascript

Question

Currently this code applies an offset to the '#fixed' ID fixed element

I can't figure out how to apply the same effect in order to set the #footer ID to position fixed bottom

Since transform creates a new local coordinate system(W3C Spec), position: fixed is fixed to the origin of scrollbar content container, ie the left: 0, top: 0 point.

Therefore, you may need to register a scroll listener and apply offsets to the fixed element.

Can anyone offer any suggestions?

Code below: 

 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>

2 answers

solution1
 3 ACCPTED  2020-05-25 02:48:37

Actually bottom: 0 is doing its job. It is anchored at the bottom of your scrolling article, but you want to anchored at the bottom of the main.

I wrap the <main> with another <div> and put <header> and <footer> there. This way you don't have to deal with scrolling y axis, no extra js calculation, no pixel-hardcoded css. The footer is in the right position out of the box. It basically create a window and see-through underlying article . Illustrated below.

在此处输入图像描述 

 #scroll, .main-wrap { width: 500px; height: 500px; position: relative; } #fixed, #footer { position: absolute; pointer-events: none; } #fixed { top: 0; left: 0; z-index: 1; width: 100%; background: skyblue; text-align: center; } #footer { bottom: 0px; left: 0; z-index: 1; 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> <div class="main-wrap"> <header id="fixed"> <h1>A fixed header</h1> </header> <footer id="footer"> <h1>A fixed footer</h1> </footer> <main id="scroll"> <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> </main> </div> </body> </html>

solution2
 1  2020-05-25 03:01:37

If you don't need the site to work on IE, then you can use [position][1]: sticky to easily get the result you desire. Otherwise, stick to Mr. Brickowski's answer.

This doesn't have the issue where the footer will cover some of the content, though you will have to style the scrollbar yourself, unfortunately.

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.

CSS settings of note: you need to set #scroll to have an overflow, and #fixed and #footer to position: sticky , and that takes care of it. Sticky will be sticky to the closest ancestor with a "scrolling mechanism". There is no JavaScript required for using this.

#scroll {
  width: 500px;
  height: 500px;
  overflow-y: auto;
}

#fixed {
  position: sticky;
  top: 0;
  background: skyblue;
  text-align: center;
}

#footer {
  position: sticky;
  bottom: 0;
  background: skyblue;
  text-align: center;
}


 #scroll { width: 500px; height: 500px; overflow-y: auto; } #fixed { position: sticky; top: 0; background: skyblue; text-align: center; } #footer { position: sticky; bottom: 0; background: skyblue; text-align: center; } #fixed h1, #footer h1 { margin: 0; } #content { padding-top: 20px; background: orange; } #content>:last-child { margin-bottom: 0; } /* From css-tricks https://css-tricks.com/the-current-state-of-styling-scrollbars/ */ html { --scrollbarBG: #CFD8DC; --thumbBG: #90A4AE; } #scroll::-webkit-scrollbar { width: 11px; } #scroll { scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } #scroll::-webkit-scrollbar-track { background: var(--scrollbarBG); } #scroll::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius: 6px; border: 3px solid var(--scrollbarBG); }
 <,DOCTYPE html> <html> <head> </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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Fixed position offset top and bottom How to stop fixed position of sticky sidebar when bottom footer is reached How to stop position fixed at footer Footer should stay at the bottom and remain in a fixed position even if the browser resizes Footer to be always at bottom but not fixed How to stop position fixed before footer? Footer position fixed to screen Stop fixed position at footer How do I create a footer that is fixed at the bottom of the screen but when the user scrolls down it is no longer fixed footer? Make footer stay at bottom of page (not fixed to bottom)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM