Кнопка наверх
Как сделать чтобы при прокрутке страницы кнопка фиксировалась отсносительно футера.
Т.е крутим вниз страницу, кнопка появилась. Если дошли до футера, кнопка не двигается, а фиксируется относительно отступа от низа страницы. Как саму кнопку сделать знаю:
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#scroller').fadeIn();
} else {
$('#scroller').fadeOut();
}
});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});
мне надо фиксировать её относительно появления футера, т.е чтобы она не наползала на футер (футер высокий) она fixed, и bottom:70px; Когда появляется футер, чтобы уже от него было 70px; |
навскидку:
от высоты страницы отнимаете высоту скролла - получаете сколько осталось до низа страницы. От высоты футера отнимаете полученную выше разницу. Если получилось отрицательное число боттом - 70пкс. Если получилось положительное (т.е. футер уже видно) - 70 + это положительное число пикселей. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<style type='text/css'>
body{padding:0px;margin:0px}
*{margin:0}
html,body{height:1000px}
.wrapper{min-height:100%;height: auto !important;height:100%;margin:0 auto -170px}
.footer,.push{height:170px}
.footer{background:#F00}
#scroll{background:#008000;height:50px;width:50px;position:fixed;right:0px;bottom:40px;display:none}
</style>
<script type='text/javascript'>
$(function(){
var up = $("#scroll"),
b = up.css("bottom"),
h = up.height(),
d = $(".footer").offset();
$(document)
.scroll(function () {
var c = $(window)
.height(),
a = $(this)
.scrollTop();
200 < a ? up.fadeIn() : up.fadeOut();
d.top > a + c - h ? up.css({
background: "red",
bottom: b
}) : up.css({
background: "green",
bottom: a + c - d.top
})
});
up.click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});
</script>
</head>
<body>
<div id="scroll"></div>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
</body>
</html>
|
Poznakomlus,
:-? вы показали что кнопку можно создать программно, но тегом проще по моему и как ваш код решает проблему Цитата:
|
рони,
Благодарю =) отлично |
| Часовой пояс GMT +3, время: 22:22. |