Question: I have a contact button that is located within the visible part of the screen between 2 content items. Once the user scrolls down I want the button fixed at the botton of the screen so it will always be within sight.

```js
var pos = $('#test').scrollTop();
if (pos > 200) $('#test').addclass('fixed')
console.log(pos)
```

```css
.fixed {
  bottom: 0px;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

#test {
  background-color: red;
}

#content {
  height: 100px;
  background: green;
}

#content2 {
  height: 1000px;
  background: blue;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="content"></div>
<div id="test">button</div>
<div id="content2"></div>
```

The problem is to know when the button will be out of sight in order to append the fixed function. 

How can this be done?

Answer: 
You can do it using `.offsetTop`. So add this and it will use your class `fixed` to do what you need.

```
var fixButton = document.getElementById("test");
var sticky = fixButton.offsetTop;

window.onscroll = function() {
  if (window.pageYOffset > sticky) {
    fixButton.classList.add("fixed");
  } else {
    fixButton.classList.remove("fixed");
  }
}

```

[**Fiddle**](https://jsfiddle.net/07t3x4nk/)
You can listen on user scroll for example via the jQuery scroll function on the window element. Save the offset and height of the object on document.ready and when both values added are <= the pageY Offset of the window they are out of sight. 

```js
$(document).ready(function() {
  const btnOffsetTop = $('#test')[0].offsetTop;
  const btnHeight = $('#test')[0].scrollHeight;

  $(window).scroll(function() {
   if(btnOffsetTop + btnHeight 
    <= window.pageYOffset){
  $('#test').addClass('fixed');
   }else{
    $('#test').removeClass('fixed');
   }
  });
});
```

```css
.fixed {
  bottom: 0px;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

#test {
  background-color: red;
}

#content {
  height: 100px;
  background: green;
}

#content2 {
  height: 1000px;
  background: blue;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="content"></div>
<div id="test">button</div>
<div id="content2"></div>
```