0

Is there any way to get bottom position using jquery of current viewport while scrolling . Not the bottom position of document but bottom position of visible window.

Zack Sac S
  • 121
  • 1
  • 2
  • 5
  • Please be more specific about what you are wanting to accomplish and what you mean by *"bottom position"* ... and of what? Also take a few minutes to read [ask] – charlietfl Nov 05 '16 at 16:16
  • Possible duplicate of [Using jquery to get element's position relative to viewport](http://stackoverflow.com/questions/1567327/using-jquery-to-get-elements-position-relative-to-viewport) – santosh singh Nov 05 '16 at 16:16
  • It is not clear what you want. Do you want the distance from bottom of viewport to the top or bottom of page? Something else? Can you give us an example, as: 1. page height is 1000px, 2. scroll down is 100px, 3. viewport height is 200px -> 4. what do you expect to get than (300, 700 or something else)? – skobaljic Nov 05 '16 at 16:16
  • Hi what is need is to get bottom position while scroll . e.g i have a screen say mobile screen 320 * 480 px . The web page is say 1000px in height , so when i scroll i want to know the bottom of page say i scrolled 300px so i must get 300 +480 which is the window height currently . i.e. bottom offset of current view . – Zack Sac S Nov 05 '16 at 16:24

1 Answers1

1

You need to sum window's scrollTop and innerHeight properties. It may be done this way:

var win = $(window);
var info = $('.bottom-position');
function onScroll() {
    var viewportBottom = win.scrollTop() + win.innerHeight();
    info.html('Bottom viewport at: ' + viewportBottom + 'px from top.');
};
win.on('scroll resize', onScroll);
onScroll();
body {
    margin: 0;
    font-family: sans-serif;
}
.content {
    height: 1000px;
    background: #000;
}
.bottom-position {
    position: fixed;
    bottom: 0;
    right: 0;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
<div class="bottom-position"></div>

Also on JSFiddle.

skobaljic
  • 9,379
  • 1
  • 25
  • 51
  • Thanks ! it was very confusing i wanted to make sticky using jquery then i figured i only needed window.screen.availHeight and set the top of element to that , however i was calculating the bottom position and when adding that position to top it was not making it sticky :p . – Zack Sac S Nov 05 '16 at 18:15