Форум

esergion · #1 (**permalink**) 14.01.2014, 17:10

Доброго времени.
На сайте в футере имеется ссылка "наверх":

$('#toUp').click(function(e) {
        e.preventDefault();
		$('body,html').animate({scrollTop: 0}, 500);
    });

Так как страница получается длинная, захотелось сделать еще плавающуюю ссылку с тем же функционалом. Когда находимся вверху страницы ссылка скрыта, так же хотелось бы ее скрывать если она опускается ниже уже имеющейся статичной ссылки. Взят jQuery-код с просторов интернета и немного доработан. Получилось следующее:

$(function(){
    	$.fn.scrollToTop=function(){
    		$(this).hide().removeAttr("href");
    		var scrollDiv=$(this);
    		var displayed=false;
    		$(window).scroll(function(){
    			if(($(window).scrollTop()=="0") || ($(scrollDiv).offset().top >= $('#toUp').offset().top)){
    				if (displayed==true){
    					$(scrollDiv).fadeOut("slow");
    					displayed=false;
    					console.log("off Плавающая кнопка офсет - " + $(scrollDiv).offset().top + " статика - "+$('#toUp').offset().top);
    				}
    			}else{
    				if (displayed==false){
    					$(scrollDiv).fadeIn("slow");
    					displayed=true;
    					console.log("On Плавающая кнопка офсет - " + $(scrollDiv).offset().top + " статика - "+$('#toUp').offset().top);
    				}
    			}
    		});
    		$(this).click(function(){
    			$("html, body").animate({scrollTop:0},"slow")
    		})
    	}
    });
    $(function() {$("#toUpSide").scrollToTop();});

Беда-печаль заключается в том, что когда плавающая ссылка находится ниже статичной она нормально фэйдАутится, но стоит в этой области поскролить страницу - эта злополучная ссылка начинает мигать (т.е. сначала включается и тут же выключается)..
Могут добры-молодцы воспомочь в такой проблеме?

Vlasenko Fedor · #2 (**permalink**) 14.01.2014, 17:15

Посмотрите в этой теме, может поможет

Появление/исчезновение элемента при прокрутке страницы JQuery

esergion · #3 (**permalink**) 15.01.2014, 09:11

Сообщение от Poznakomlus

Посмотрите в этой теме, может поможет

Появление/исчезновение элемента при прокрутке страницы JQuery

Ох и сильно Кунг-Фу ваше явоскриптское в той теме! Долго мне еще рассветы с закатами созерцать, дабы приблизится к такому мастерству.
Вот взял за пример ваш код и немного "приупростил" свое писание, получилось следующее для наглядности:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  footer{
    width: 100%;
    background-color: gray;
    height: 350px;
    position:absolute;
    top:1250px;
    left:0;
  }
#toUp {
	color: #111;
}
#toUpSide {
	position: fixed;
    bottom: 30px;
   right:30px;
}
  body{
     height: 1600px;
  }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $('#toUp').click(function(e) {
        e.preventDefault();
		$('body,html').animate({scrollTop: 0}, 500);
    });
    $(function(){
    	$.fn.scrollToTop=function(){
    		$(this).hide().removeAttr("href");
    		var scrollDiv=$(this), displayed;
    		$(window).scroll(function(){
    			displayed = $(window).scrollTop()>=200 && $(scrollDiv).offset().top<=$('#toUp').offset().top;
    			if (displayed){
    				$(scrollDiv).fadeIn("slow");
    			}else{
    				$(scrollDiv).fadeOut("slow");
    			}
    		});
    		$(this).click(function(){
    			$("html, body").animate({scrollTop:0},"slow")
    		})
    	}
    });
    $(function() {$("#toUpSide").scrollToTop();});

  </script>
</head>
<body>
   <div id="content">Тут контент
   </div>
   <footer>
       <a href="#" id="toUp">Наверх</a>
       <a href="#" id="toUpSide">Наверх</a>
   </footer>
</body>
</html>

Попробуйте поскролить в тот момент, когда плавающая ссылка опускается ниже статической, будет мигать..
Предполагаю что проблема в логических операторах, видимо не так надобно проверять..

Vlasenko Fedor · #4 (**permalink**) 15.01.2014, 12:20

Если кнопка наверх
http://jsfiddle.net/vlasenkofedor/YZsbK/

esergion · #5 (**permalink**) 15.01.2014, 13:59

Сообщение от Poznakomlus

Если кнопка наверх
http://jsfiddle.net/vlasenkofedor/YZsbK/

Красота то какая! Премного благодарен вам за столь удивительное для меня открытие!
Этим методом и воспользуюсь всенепременнейше, т.к. задачу он решает очень элегантно.
Но, к сожалению, вопрос про скрытие плавающего элемента, опускающегося ниже другого элемента, остается для меня открытым на сей день..

Vlasenko Fedor · #6 (**permalink**) 15.01.2014, 14:13

http://learn.javascript.ru/play/seItt
так что-ли?

esergion · #7 (**permalink**) 15.01.2014, 15:40

Сообщение от Poznakomlus

http://learn.javascript.ru/play/seItt
так что-ли?

Именно так, сделал следующее:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  footer{
    width: 100%;
    background-color: gray;
    height: 350px;
    position:absolute;
    top:1250px;
    left:0;
  }
#toUp {
    color: #111;
}
#toUpSide {
    position: fixed;
    bottom: 30px;
   right:30px;
}
  body{
     height: 1600px;
  }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    	//Нажатие "Наверх"
	$('#toUp').click(function(e) {
        e.preventDefault();
		$('body,html').animate({scrollTop: 0}, 500);
    });
    //Плавающая кнопка "Наверх"
    jQuery(function (f) {
    	var scrollToTopEl = f('#toUpSide'),
    	disableScrollEl = f('#toUp');
    	scrollToTopEl.hide();
    	f(window).scroll(function () {
    		scrollToTopEl['fade' + (f(this).scrollTop() > 200 && (disableScrollEl.offset().top - 500) > f(this).scrollTop() ? 'In' : 'Out')]();
    	});
    	scrollToTopEl.click(function(){
    		$("html, body").animate({scrollTop:0},"slow")
    	});
    })
  </script>
</head>
<body>
   <div id="content">Тут контент
   </div>
   <footer>
       <a href="#" id="toUp">Наверх</a>
       <a href="#" id="toUpSide">Наверх</a>
   </footer>
</body>
</html>

Плавающая ссылка исчезает когда (window).scrollTop() становится больше, чем оффсэт-500px у статичной ссылки.
Если сравнивать оффсэт плавающей и статичной - плавающая мигает при скролинге в области ниже статичной, как и ранее.
Вобщем задача решена, огромное спасибо вам, Poznakomlus, за терпение и содействие, да уродятся финики в саду вашем!

Форум

Справочник

Discord чат

Курсы javascript