Нижняя граница окна
Здравствуйте, подскажите пожалуйста, что нужно указать в коде, чтобы элемент всегда появлялся снизу страницы. На данный момент для определения нижней границы в коде js используется
document.body.scrollHeight Есть сомнения по поводу данного способа, подскажите более корректный способ для данного случая. Код: https://jsfiddle.net/5ro06noz/ |
Webrow,
position: fixed; js не нужен. |
CSS - position: fixed; //left/bottom
|
Цитата:
|
Webrow,
Конкретизируй условие |
Вы написали, что js не нужен. Если я вас правильно понял, то скрипт вообще не нужен и всю анимацию от появления до передвижения элемента при скроллинге страницы можно реализовать средствами css. Мой вопрос: как заменить работу скрипта из моего примера стилями css, чтобы элемент также появлялся снизу экрана и двигался при скроллинге.
|
Чтобы так плавно опускался никак без JS, остальное можно!
|
Цитата:
document.body.scrollHeight? |
Как тут любят говорить конкретизируй вопрос. То у тебя плавно появлялся, то плавно опускался.
Первое легко через свойство css: opacity, второе только через js. |
document.body.scrollHeight заменить на window.innerHeight; |
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>
|
рони,
как то не очень красиво =( |
j0hnik,
Цитата:
|
рони, я про анимацию. изначальная версия симпатичней
|
j0hnik,
строка 25 открыта для вашего творчества :) |
рони,
я думаю, тут подразумевался скроллинг элемента и его анимация при выходе из вьюпорта. https://jsfiddle.net/5ro06noz/3/ |
Rasy,
подождём автора темы ... |
Цитата:
window.innerHeight + $(window).scrollTop() рони, спасибо за код, но в моем примере элемент появляется снизу только при обновлении страницы, ну и при скроле наверх. Я понимаю, что изначально не совсем конкретно изложил свою просьбу, но про появление снизу при каждом скроле я не говорил и мне не ясно, каким образом 25 строка вернет анимацию элемента, как в моем примере и уберет появление при каждом скроле? Хотя должен отметить, что появление элемента в вашем примере выглядит довольно интересно. Еще бы вернуть анимацию перемещения при скроле. Цитата:
|
Webrow,
я пас, не понимаю что вам нужно. |
Посмотрите мой пример из первого поста, все что мне нужно, это заменить document.body.scrollHeight, которая определяет, откуда будет стартовать объект при обновлении страницы. С document.body.scrollHeight при обновлении страницы даже заметно, как полоса скрола меняет размер, когда стартует объект. В ваших примерах такого не наблюдается, старт объекта происходит корректно.
|
Webrow,
<!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").addClass("up"),
b,
c = $(window).scrollTop();
$(window).scroll(function() {
window.clearTimeout(b);
a.css({bottom : Math.min($(window).height()-65,Math.max(-65,c - $(window).scrollTop()) ) })
b = window.setTimeout(function() {
a.css({bottom : ""});
c = $(window).scrollTop();
}, 200)
}).trigger("scroll")
});
</script>
</head>
<body>
<div class="height">
<div class="ret_block">
<div class="ret"> </div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:49. |