Как реализовать блок, чтобы при прокрутке залипал у нижней границы окна браузера?

#javascript #jquery

Как сделать, что бы при прокрутке блок прижимался к краю браузера, при этом блок
находится далеко в подвале?
Вот скролируемый блок 
Вот он в подвале 
Когда до скролировали до этого блока в подвале, скролируемый блок садится на место
где он должен и быть.
    

Ответы

Ответ 1

Например так:



$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
    $('.arr').fadeIn();
  } else{
    $('.arr').fadeOut();
  }
});

$(document).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    $('.arr').addClass('fix');
  } else {
    $('.arr').removeClass('fix');
  }
});
.footer{
  position: relative;
}


/* Стрелка изначальная */
.arr {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Стрелка при скролле до низа страницы */
.arr.fix {
  position: absolute;
  top: -50px;
  bottom: auto;
}


/* Стили для наглядности */
.arr {
    width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #000;
  
    transition: all .27s ease-in-out;
}

.content {
  height: 1500px;
  border: 1px solid #ccc;
}

.footer {
  background: #333;
  text-align: center;
  padding: 1rem;
  color: #fff;
}





  Некоторый основной контент

  
  

    
    

    
    Тут подвал
  


Ответ 2

Альтернативный вариант



render();
$(document).scroll(render);

function render() {

  var corner = $('#corner');
  var black = $('#black');
  var cornerHeight = corner.outerHeight();

  corner.each(function(index, el) {

    if (black.offset().top > ($(window).innerHeight() + $(window).scrollTop())) {

      $(this).stop().animate({
        top: $(window).innerHeight() - cornerHeight + $(window).scrollTop()
      }, 0);

    } else {

      $(this).stop().animate({
        top: black.offset().top - cornerHeight
      }, 0);

    }
  });
}
html. body {
  position: relative;
}
#body {
  height: 700px;
}
#black {
  height: 100px;
  background-color: black;
}
#corner {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 50%;
  background-size: cover;
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/12990-200.png);
}
#result {
  position: fixed;
  top: 10px;
  right: 10px;
}