Плавающая фиксация при прокрутке

Пример можно увидеть справа и снизу страницы при ее прокрутке

HTML:

<div class="pin pin-1">1</div>
<div class="pin pin-2">2</div>

1 2	<div class="pin pin-1">1</div> <div class="pin pin-2">2</div>

CSS:

.pin {
	position: fixed;
	z-index: 9999999;
	background: #337AB7;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	transition: transform 100ms linear;
	border-radius: 12px;
	color: #FFF;
	font-size: 40px;
	font-weight: 500;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;  
}
.pin.pin-1 {
	top: calc(50% - 100px);
	right: 30px;
	width: 60px;
	height: 200px;
}
.pin.pin-2 {
	bottom: 30px;
	left: calc(50% - 100px);
	width: 200px;
	height: 60px;
}

.pin {

position: fixed;

z-index: 9999999;

background: #337AB7;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

transition: transform 100ms linear;

border-radius: 12px;

color: #FFF;

font-size: 40px;

font-weight: 500;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

}

.pin.pin-1 {

top: calc(50% - 100px);

right: 30px;

width: 60px;

height: 200px;

}

.pin.pin-2 {

bottom: 30px;

left: calc(50% - 100px);

width: 200px;

height: 60px;

}

jQuery:

const lagAmount = 50;
const maxSpeed = 100;
const frameRate = 20;
const pinselector = '.pin';
let scrollTop = 0;
let pinTop = 0;
let lastTime;
const updatePinPosition = (time) => {
	if (!lastTime)
	lastTime = time;
	let delta = time - lastTime;
	if (delta >= frameRate){
		scrollTop = $(window).scrollTop();
		let move = (scrollTop - pinTop) * delta / (lagAmount + delta);
		let direction = move === 0 ? 0 : move / Math.abs(move);
		pinTop = pinTop + Math.min( Math.abs(move), maxSpeed ) * direction;
		$(pinselector).css('transform', `translateY(${-move}px`)
		lastTime = time;
	}
	requestAnimationFrame(updatePinPosition);
}
requestAnimationFrame(updatePinPosition);

const lagAmount = 50;

const maxSpeed = 100;

const frameRate = 20;

const pinselector = '.pin';

let scrollTop = 0;

let pinTop = 0;

let lastTime;

const updatePinPosition = (time) => {

if (!lastTime)

lastTime = time;

let delta = time - lastTime;

if (delta >= frameRate){

scrollTop = $(window).scrollTop();

let move = (scrollTop - pinTop) * delta / (lagAmount + delta);

let direction = move === 0 ? 0 : move / Math.abs(move);

pinTop = pinTop + Math.min( Math.abs(move), maxSpeed ) * direction;

$(pinselector).css('transform', `translateY(${-move}px`)

lastTime = time;

}

requestAnimationFrame(updatePinPosition);

}

requestAnimationFrame(updatePinPosition);

Найдено на codepen.io у пользователя Nathan Taylor

HTML:

CSS:

jQuery:

Смотрите также:

Добавить комментарий:

Комментарии: