Как сделать div фиксированным, как только полная высота прокручена?

Question

У меня есть боковая панель, в которой я хочу стать позицией: исправлено; и цепляться за нижнюю часть экрана, но только после прокрутки всего div.

Деление должно прокручиваться как нормальное относительно его родителя, а затем фиксироваться, когда нижняя часть этого div соответствует нижней части окна браузера. Я пытаюсь достичь боковой панели, например, this.

Я наткнулся на кусок JS-online, который я включил в свой Demo, но не был отличным с JS. Я даже не уверен, что я поступаю правильно. &, похоже, не может заставить его работать ,

$(document).ready(function() { 
    var s = $(".sidebar"); 
    var pos = s.offset().top+s.height(); //offset that you need is actually the div's top offset + it's height 
    $(window).scroll(function() { 
    var windowpos = $(window).scrollTop(); //current scroll position of the window 
    var windowheight = $(window).height(); //window height 
    if (windowpos+windowheight>pos) s.addClass('stick'); //Currently visible part of the window > greater than div offset + div height, add class 
     else s.removeClass('stick'); 
    }); 
}); 

Update: мне нужно JS, чтобы обнаружить, когда весь элемент в поле зрения, а затем сделать его фиксированным со дна. Или, точнее, когда нижняя часть элемента попадает в нижнюю часть окна.

Любая помощь или руководство будут оценены.

Answer 1

Как я уже сказал, вы находитесь в правильном направлении. Я сделал незначительные изменения в ваши JS и CSS

JsFiddle Here

JS код:

$(document).ready(function() { 
    var s = $(".sidebar"); 
    var sideBarBottomY = s.offset().top+s.height(); 


    $(window).scroll(function() { 
     var windowTopY = $(window).scrollTop(); 
     if (windowTopY>sideBarBottomY){ 
      s.addClass('stick'); 
     }else{ 
      s.removeClass('stick'); 
     } 
    }); 
}); 

Answer 2

это что-то вроде этого? JSFiddle

Код:

$(document).ready(function() { 
    var h = $(".header"); 
    var s = $(".sidebar"); 
    var f = $(".footer"); 
    var startat = h.offset().top+h.height(); 
    s.css({top: startat+"px",height: s.height()+"px"}); 
    var pos = s.offset().top+s.height(); //offset that you need is actually the div's top offset + it's height 
    var endat = f.offset().top; 

    $(window).scroll(function() { 
     var endat = f.offset().top; 
     var footer_height = f.height(); 
     var windowpos = $(window).scrollTop(); //current scroll position of the window 
     var windowheight = $(window).height(); //window height 

     if ((windowpos+windowheight)>pos && (windowpos+windowheight)<endat){ 
      s.css({top: "",height: ""}); 
      s.addClass("stick").removeClass("reston"); 
      s.css({bottom: ""}); 
     } else if((windowpos+windowheight)>endat){ 
      s.css({bottom: footer_height+"px"}); 
     } 
     else { 
      s.css({top: startat+"px",height: s.height()+"px"}); 
      s.removeClass("stick").addClass("reston"); 
      s.css({bottom: ""}); 
     } 
    }); 
}); 

Вы могли бы добавить некоторые CSS, как анимация для плавной прокрутки эффекта врезки.

или используя непосредственно верхний атрибут положения и нажмите scrollTop и ждать как раз перед «сноской», как «еще, если»

наилучших пожелания