Div Positions While Page Scroll

I have two div left and right and on left part I set position fixed while scrolling and when scroll is about to finish I remove position and set it to bottom zero. Similar concept

Solution 1:

Actually with your code after scroll > 10 it will add/remove class then after scroll higher than window which in the same time > 10 your code will add/remove then remove/add classes on each scroll ..

$(window).scroll(function() {
   if ($(window).scrollTop() > 10  && $(window).scrollTop() + $(window).height() < $(document).height()  - 100) {   
     $(".fixedSlider").addClass("DivAffix").removeClass("DivBottom");
  }
  if($(window).scrollTop() + $(window).height() > $(document).height()  - 100) {
    $(".fixedSlider").removeClass("DivAffix").addClass("DivBottom");
  }
});

Here is the demobut I changed a little bit on css to notice the action

$(window).scroll(function() {
  if ($(window).scrollTop() > 10  && $(window).scrollTop() + $(window).height() < $(document).height()  - 100) {   
    $(".fixedSlider").addClass("DivAffix").removeClass("DivBottom");
  }
  if($(window).scrollTop() + $(window).height() > $(document).height()  - 100) {
    $(".fixedSlider").removeClass("DivAffix").addClass("DivBottom");
  }
});

#content{
  height : 2000px;
}
.DivAffix{position: fixed;width: 100px ; bottom : 0;}
.DivBottom{position: relative;bottom: 0}    
.fixedSlider {min-height: 116px;background : red;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="content">Content</div><divclass="fixedSlider">fixedSlider</div>