Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2013, 10:30
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

Кнопка наверх
Как сделать чтобы при прокрутке страницы кнопка фиксировалась отсносительно футера.

Т.е крутим вниз страницу, кнопка появилась.
Если дошли до футера, кнопка не двигается, а фиксируется относительно отступа от низа страницы.

Как саму кнопку сделать знаю:

$(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;

Последний раз редактировалось dolte, 10.10.2013 в 10:35.
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2013, 21:28
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

навскидку:
от высоты страницы отнимаете высоту скролла - получаете сколько осталось до низа страницы.
От высоты футера отнимаете полученную выше разницу. Если получилось отрицательное число боттом - 70пкс. Если получилось положительное (т.е. футер уже видно) - 70 + это положительное число пикселей.
Ответить с цитированием
  #3 (permalink)  
Старый 11.10.2013, 01:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

Сообщение от dolte
чтобы она не наползала на футер (футер высокий)
Вариант ...
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.10.2013, 07:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,043

Poznakomlus,
вы показали что кнопку можно создать программно, но тегом проще по моему и как ваш код решает проблему
Сообщение от dolte
мне надо фиксировать её относительно появления футера, т.е чтобы она не наползала на футер (футер высокий)
Ответить с цитированием
  #5 (permalink)  
Старый 11.10.2013, 08:34
Аспирант
Отправить личное сообщение для dolte Посмотреть профиль Найти все сообщения от dolte
 
Регистрация: 04.09.2013
Сообщений: 37

рони,
Благодарю =) отлично
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает кнопка "Наверх" dle 9.3 dunek_ Opera, Safari и др. 1 25.05.2013 17:26
Кнопка с запросом Logo424 Javascript под браузер 12 20.05.2013 18:29
Кнопка ссылкой, для случаев если js отключен clear Events/DOM/Window 1 27.07.2011 08:08
Появляющаяся/исчезающая кнопка при прокрутке страницы MailRes Элементы интерфейса 2 22.06.2011 10:49
Кнопка onclick=javascript:location в новом окне Nikola Общие вопросы Javascript 7 13.11.2010 10:16