Форум

An1984tonn · #1 (**permalink**) 11.02.2017, 12:37

Подскажите пожалуйста, как сделать плавающий фиксированный блок на javascript, как тут https://pozvonim.com/?i=3018635123 в нижнем правом углу "заказать звонок".
Интересует его перемещение и возврат к нижнему углу с задержкой
Желательно без jquery если можно))
нашел вот такой пример но не пойму как прижать блок именно к нижнему углу, да и не хотелось подключать здоровенную библиотеку jquery, дабы не перегружать сайт

<style>#scroll{
		position:absolute;
		width:80px;
		height: 80px;
		background: #000;
		left: 85%
		}
		
		body{
			height: 3000px;
		}
	</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
</head>
<body>
<div id="scroll">
<div id="good"></div>
</div>	


<script>
	
		(function($){
	    $.fn.stickyScroll = function(options) {
	        var defaults = {  
	            easing: 'linear',
	            duration: 300,
	            queue: false
	        }, $t = this;
	        options = $.extend(defaults, options);
	        this.css({ position: 'relative', top: 0 });
	        $(window).scroll(function() {
	            var wst = $(window).scrollTop();
	            $t.each(function() {
	                var getObject = $(this), parent = getObject.parent()
	                if(wst > (parent.offset().top) &&
	                    (parent.height() + parent.position().top - 20) > (wst + getObject.height())
	                ){
	                    getObject.animate({ top: (wst - parent.offset().top) + "px" }, 
	                        { queue: options.queue, easing: options.easing, duration: options.duration });
	                } else if(wst < (parent.offset().top)){
	                    getObject.animate({ top: "0px" },
	                        { queue: options.queue, easing: options.easing, duration: options.duration });
	                }
	            });
	        });
	        return this;
	    };
	})(jQuery);
	</script>
<script type="text/javascript">
	jQuery(function() {
		jQuery('#scroll').stickyScroll();
	});	
</script>

AndreyAndrey · #2 (**permalink**) 16.02.2017, 12:46

Это скорее вопрос по CSS.
Пробуй связку:
position: absolute;
left: 0;
bottom: 0;

рони · #3 (**permalink**) 16.02.2017, 14:16

An1984tonn,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    #scroll{
    position:absolute;
    width:80px;
    height: 80px;
    background: #000;
    left: 85%;
    transition: top .8s ease-in-out;
    top : 20px;
    }
     .red{
       border: rgb(255, 0, 0) 5px solid;
       border-radius: 50%;
     }

    body{
      position: relative;
      height: 3000px;
    }
  </style>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  var block = document.querySelector('#scroll'),
  top,
  bottom = 50,
  timer;
  document.addEventListener('scroll', function() {
  window.clearTimeout(timer);
  timer = window.setTimeout(function() {
  top = window.pageYOffset + document.documentElement.clientHeight - bottom - block.clientHeight;
  top = window.pageYOffset < 50 ? ''  : top + 'px';
  block.classList.remove('red');
  block.style.top = top;

},80)
  block.addEventListener('transitionend', function() {
  block.classList.add('red')
}, false);
  });
    });
  </script>
</head>

<body>
<div id="scroll" class="red"></div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript