Скрыть плавающую ссылку "Наверх" если она ниже статичной [SOLVED]
Доброго времени.
На сайте в футере имеется ссылка "наверх":
$('#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();});
Беда-печаль заключается в том, что когда плавающая ссылка находится ниже статичной она нормально фэйдАутится, но стоит в этой области поскролить страницу - эта злополучная ссылка начинает мигать (т.е. сначала включается и тут же выключается).. Могут добры-молодцы воспомочь в такой проблеме? |
Посмотрите в этой теме, может поможет:)
http://javascript.ru/forum/misc/4423...cy-jquery.html |
Цитата:
Вот взял за пример ваш код и немного "приупростил" свое писание, получилось следующее для наглядности:
<!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>
Попробуйте поскролить в тот момент, когда плавающая ссылка опускается ниже статической, будет мигать.. Предполагаю что проблема в логических операторах, видимо не так надобно проверять.. |
Если кнопка наверх
http://jsfiddle.net/vlasenkofedor/YZsbK/ |
Цитата:
Этим методом и воспользуюсь всенепременнейше, т.к. задачу он решает очень элегантно. Но, к сожалению, вопрос про скрытие плавающего элемента, опускающегося ниже другого элемента, остается для меня открытым на сей день.. |
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, за терпение и содействие, да уродятся финики в саду вашем! |
| Часовой пояс GMT +3, время: 13:03. |