Разделы
Теги | RSS © 2008 – 2022
Контакты
email:
skype:
» » тизер

Скрипт выезжающей панели снизу при прокрутке


Скрипт выезжающей панели снизу при прокрутке

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<title>Скрипт</title>
<script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<style>
.linked {
border:0px solid #ccc;
background:#fff;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75);
}
.close {text-decoration:none; color:#999;}
.linked{position:fixed;left:-340px;bottom:25px;width:340px;text-align:left;z-index:100;display:none}
.linked table{width:100%}
.linked .top-c{height:30px;}
.linked .top-r{height:30px;width:30px;}
.linked .mid-c{background:#fff;padding:0px 0px 0px 10px}
.linked .mid-r{width:30px;}
.linked .bot-r{height:30px;width:30px;}
.linked .bot-c{height:30px;}
.linked .close{width:18px;height:18px;position:absolute;right:30px;top:30px;display:block}
</style>

<script>
var isLoadObozrevatelCommonJS = true;

var linked =
{
show: true,
Hide: function() {
$(".linked").animate({ left: -340 }, 200, function() { $(this).hide() });
},
Init: function() {
$(".linked .close").click(function() {
linked.show = false;
linked.Hide();
return false;
});

linked.startShow = $(".read-also").offset().top;

$(window).scroll(function() {
if (!linked.show)
return;

var scroll = $(document).scrollTop();
var obj = $(".linked");

if (scroll + window.innerHeight > linked.startShow + $(".linked").height()) {
if (!obj.is(':visible') && !obj.is(':animated')) {
$(".linked").show().animate({ left: 0 }, 200);
}
} else {
if (obj.is(':visible') && !obj.is(':animated')) {
linked.Hide();
}
}
});
}
}
</script>
<script>InitNewsScroll()</script>


<div class="read-also"></div>

<div class="linked">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td></td><td class="top-r"></td></tr>
<tr>
<td class="mid-c">
asdfasf
</td>
<td class="mid-r"></td>
</tr>
<tr><td class="bot-c"></td><td class="bot-r"></td></tr>
</table>
<a class="close" href="#">x</a>
</div>
<script>linked.Init()</script>


<div style="width:100px; height:100px; background:grey"></div>

</body>
</html>
Вверх