CODEWITHSUNDEEP
jqueryhtml
Hoàng Lập
Hoàng Lập

Reputation: 117

How to get bottom position of current viewport on browser

I want to get the bottom position of the visible part of the document, not the height of document.

For example, my screen height is 768px then the height of visible part is about 650px, if the scroll height is 200px then the bottom position will be around 850px. I tried using $(window).height() but it returns the height of the document.

Upvotes: 10

Views: 23079

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve this you just need to add the scrollTop() of the window to its height() within the scroll() event handler, like this:

$(window).scroll(function() {
  $('.foo').text($(window).scrollTop() + $(window).height());
}).scroll();
body {
  padding: 0;
  margin: 0;
}

.content {
  height: 30000px;
}

.foo {
  position: fixed;
  top: 10px;
  left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content"></div>
<div class="foo"></div>

Upvotes: 8

asdillon29
asdillon29

Reputation: 201

Without jQuery

window.scrollY + window.innerHeight

Upvotes: 20

Related Questions