Прочитал множество подобных вопросов на форуме, но ничего не помогает.
На сайте под внушительным хедером, будет находиться небольшое полоса с телефоном и кнопкой заказать, при прокрутке хедера до этой полоски, полоска должна прилипать к верху страницы, и в дальнейшем при прокрутке так и оставаться наверху. Если пользователь поднимется вверх до хедера, то полоса прилипает на прежнее место.
Помогите пожалуйста, вот код:
<!DOCTYPE HTML>
<html>
<head>
<title>Fixed</title>
<meta charset="utf-8">
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script type="text/javascript">
var wrap = $("#nav");
wrap.on("scroll", function(e) {
if (this.scrollTop > 500) {
wrap.addClass("sticky");
} else {
wrap.removeClass("sticky");
}
});
</script>
<style>
*
{
margin: 0;
padding: 0;
border: 0;
}
body
{
font-size: 25px;
color: #fff;
font-family: 'Microsoft Sans Serif';
}
#header
{
height: 1000px;
background-color: gray;
}
#nav
{
height: 40px;
background-color: red;
text-align: center;
}
#text
{
background-color: #CCC;
height: 2000px;
}
.sticky
{
position: fixed;
width: 100%;
top: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
</div>
</header>
<nav>
<div id="nav">
<div id="logo_nav"></div>
<div id="tel_nav"><p>Телефон</p></div>
</div>
</nav>
<div id="text">
</div>
</div>
</body>
</html>