how to change css when user scrolls to bottom of page

Question

i currently have a div that appears fixed after scrolling. i want that div to to remain visible but not fixed once the user reaches the bottom of the page..

this is what i have so far:

var topOfOthDiv = 800; //set manually for example
$(window).scroll(function() {
  if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
    $("#ctawrapper.ctaFloat").addClass('show'); //reached the desired point -- show div
  } else {
    $("#ctawrapper.ctaFloat").removeClass('show'); //reached the desired point -- hide div
  }
});

#ctawrapper.ctaFloat {
  position: fixed;
  bottom: 0;
  height: auto;
  max-height: 100px;
  width: 90%;
  display: none;
}

#ctawrapper.show {
  background: #fff;
  width: 100%;
  z-index: 999;
  left: 0px;
  padding: 15px;
  border: 1px solid #ddd;
  display: block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctawrapper" class="clearfix ctaFloat">
  <h4>sponsored topics</h4>
</div>

everything i have tried to do to add a new class or change the css once it reaches the footer have failed. can i get some help please?

First point should help you to see where you go in IF or ELSE, and the second point will show you if the element #ctawrapper.ctaFloat exists/is found — Răducanu Ionuţ, Jan 10 '18 at 18:13
It would be good for you to add a bit more in your example to allow us to replicate the failure if possible. It looks like your structure works for elements with a simple id - I wonder if it's something to do with $("#ctawrapper.ctafload") as a reference? — , Jan 10 '18 at 18:21
thank you for your help.. the above code i posted is working as it should. im just looking for help to change the position to relative once it reaches the bottom. either by changing the css or by adding a class... the page its going on is loading various articles dynamically so the page height will always be different so i cant have a set pixel height to trigger the change — bstime, Jan 10 '18 at 18:27
Instead of putting console logs, the more efficient way to debug is using the debugger and stepping through the js so you can see exactly ow the code is running — Huangism, Jan 11 '18 at 18:10
@bstime can you show the code of your attempt to add a class when reaching the footer? also what is the issue of having it fixed? if you make it relative, it might not be visible on the page anymore. If you are having trouble detecting the bottom of the page then see https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom — Huangism, Jan 11 '18 at 18:14

how to change css when user scrolls to bottom of page

0 Answers0