Make a fixed div stay at a certain point when scrolling

Question

I have a div in html that I would like to stop when it hits a certain point above the bottom to line up with another element. It is fixed so it will scroll with the list of information I have but I want it to stop when the information stops. Don't know if that makes sense. I don't have very much experience with java or jquery but I would like it in jquery if possible so I don't have to reference an outside file.

There's no obvious or easy way to do this that will work for all situations. You're going to need to learn more about making websites. (PS. It's JavaScript... Java is something extremely different, despite the name.) Good luck. — Chuck Le Butt, Mar 06 '16 at 21:10
You should be looking for "Javascript sticky" like this: http://stickyjs.com/ — Enkode, Mar 06 '16 at 21:11
You could use a solution similar to this [http://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point](http://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point) — Martin Staufcik, Mar 06 '16 at 21:12
or http://stackoverflow.com/questions/35663506/divs-moving-with-scroll/35663682#35663682 run the snippet to check if that meets your needs — G-Cyrillus, Mar 06 '16 at 22:33

score 0 · Answer 1 · answered Mar 06 '16 at 23:07

This can be done by jQuery. As others have said take a look into it as well as Javascript.

Take a look at an example of an approach I made here: https://jsfiddle.net/ej83w0k9/

.fixed-header {
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 100px;
}

/*the fixed snippet, triggered by js*/
.fixedPos{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    top: 0;
} 

.fixed-header__nav li {
  display: inline-block;
  list-style-type: none;
}

jQuery here:

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

if (scroll >= 100) {
    $(".fixed-header").addClass("fixedPos");
}
else{

    $(".fixed-header").removeClass("fixedPos");
}
 });

Make a fixed div stay at a certain point when scrolling

1 Answers1