0

I can't seem to find the exact answer I'm looking for online, but the problem is that I'm not even sure what to look for.

When you enter the homepage, I want a div to be stuck to the bottom (for any device) and when you scroll. But I do not want it fixed so that it scrolls with the screen.

I'm sure this is some responsive trick that I'm overlooking, but I'd love some feedback. Thank you in advanced!

EDIT: I do not want the div to follow you upon scrolling. But I do want it to appear to the very bottom of the screen when you first view the site (no matter the platform you are using to view the site.)

Example is this site. The down arrow appears in the same spot for all devices, but does not scroll with the user: https://www.nabitablet.com/

ticklishoctopus
  • 63
  • 1
  • 10
  • 1
    "I want a div to be stuck to the bottom, and when you scroll. But I do not want it fixed so that it scrolls with the screen" - are these not the same requirements? – Ben Sewards Apr 01 '16 at 21:58
  • I guess you are asking the same thing as in http://stackoverflow.com/questions/882104/fixed-bottom-aligned-div. In short, just use `position: fixed;` with `bottom: 0px;` css attribute. – deem Apr 01 '16 at 22:03
  • Well, yes and no. I want it to appear at the bottom of the browser (for any device), but when you scroll down, I do not want it to stay at the bottom. I do not want it fixed so it follows your scroll. – ticklishoctopus Apr 01 '16 at 22:20
  • This is usually referred to as a "sticky footer", there's plenty of info on Google. – Tommy Arnold Apr 01 '16 at 22:25
  • I've had a look at sticky footers. However, it is not a footer I'm looking for. Please refer back to my edits. I've included an example. =] – ticklishoctopus Apr 01 '16 at 22:28
  • If you inspect your example webpage you will notice that the arrow is in div with fixed position. So I'm not sure I understand you. You want your div to be "stuck" to the bottom when scrolling up? And what you want it to do when scrolling down? Any JSFiddle draft? – Alexandr Belov Apr 01 '16 at 22:33

1 Answers1

1

You might be able to use an absolutely positioned container sized to the window, then absolutely position the item to the bottom of that. Depending on your page structure, this might not work.

body {
  height: 5000px;
}

.container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.item {
  background-color: #f00;
  bottom: 0;
  height: 50px;
  position: absolute;
  width: 100%;
}
<div class="container">
  <div class="item"></div>
</div>
Brandon Gano
  • 6,430
  • 1
  • 25
  • 25
  • Ha! This is exactly what I was looking for! Unfortunately easier to execute than I thought and harder to explain that I thoughts as well. Thank you! – ticklishoctopus Apr 02 '16 at 23:22