19.09.2017, 20:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
webmanss,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.height{
width:300px;
height:3000px;
background:#FFF;
}
.ret_block{
height:65px;
width:65px;
position: fixed;
opacity:0;
right:100px;
bottom: -70px;
}
.ret_block.up{
transition:bottom 2s cubic-bezier(.35,1.88,.51,.97), opacity 3s ease-out;
opacity: 1;
bottom: 100px;
}
.ret{
background:#80c111;
opacity:0.9;
border-radius: 50% !important;
cursor:move;
height:65px;
position:absolute;
width:65px;
z-index:9999;
cursor:pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = $(".ret_block"),
b;
$(window).scroll(function() {
window.clearTimeout(b);
a.removeClass("up");
b = window.setTimeout(function() {
a.addClass("up")
}, 300)
}).trigger("scroll")
});
</script>
</head>
<body>
<div class="height">
<div class="ret_block">
<div class="ret"> </div>
</div>
</div>
</body>
</html>
Последний раз редактировалось рони, 19.09.2017 в 20:43.
|
|
19.09.2017, 20:21
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
рони,
как то не очень красиво =(
|
|
19.09.2017, 20:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
j0hnik,
|
Сообщение от Webrow
|
|
чтобы элемент всегда появлялся снизу страницы
|
что не так?
|
|
19.09.2017, 20:29
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
рони, я про анимацию. изначальная версия симпатичней
|
|
19.09.2017, 20:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
j0hnik,
строка 25 открыта для вашего творчества 
|
|
19.09.2017, 23:52
|
|
Профессор
|
|
Регистрация: 17.06.2016
Сообщений: 509
|
|
рони,
я думаю, тут подразумевался скроллинг элемента и его анимация при выходе из вьюпорта.
https://jsfiddle.net/5ro06noz/3/
Последний раз редактировалось Rasy, 19.09.2017 в 23:58.
Причина: lul
|
|
20.09.2017, 00:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Rasy,
подождём автора темы ...
|
|
20.09.2017, 00:14
|
|
Новичок на форуме
|
|
Регистрация: 19.09.2017
Сообщений: 6
|
|
Сообщение от j0hnik
|
document.body.scrollHeight
заменить на
window.innerHeight;
|
Спасибо, но с параметром window.innerHeight если проскролить страницу вниз и обновить, то элемент появляется сверху. Снизу появляется только в связке
window.innerHeight + $(window).scrollTop()
рони, спасибо за код, но в моем примере элемент появляется снизу только при обновлении страницы, ну и при скроле наверх. Я понимаю, что изначально не совсем конкретно изложил свою просьбу, но про появление снизу при каждом скроле я не говорил и мне не ясно, каким образом 25 строка вернет анимацию элемента, как в моем примере и уберет появление при каждом скроле? Хотя должен отметить, что появление элемента в вашем примере выглядит довольно интересно. Еще бы вернуть анимацию перемещения при скроле.
В вашем примере появление снизу тоже корректное. Далее при скроле элемент всегда должен возвращаться на одно место. В моем примере меня устраивало все, кроме функции, которая определяла, откуда будет стартовать элемент при обновлении страницы.
Последний раз редактировалось Webrow, 20.09.2017 в 00:25.
|
|
20.09.2017, 00:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Webrow,
я пас, не понимаю что вам нужно.
|
|
20.09.2017, 00:43
|
|
Новичок на форуме
|
|
Регистрация: 19.09.2017
Сообщений: 6
|
|
|
Посмотрите мой пример из первого поста, все что мне нужно, это заменить document.body.scrollHeight, которая определяет, откуда будет стартовать объект при обновлении страницы. С document.body.scrollHeight при обновлении страницы даже заметно, как полоса скрола меняет размер, когда стартует объект. В ваших примерах такого не наблюдается, старт объекта происходит корректно.
|
|
|
|
