Показать сообщение отдельно
  #6 (permalink)  
Старый 19.12.2013, 13:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

вариант фиксации блока перед футером ...
<!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:270px}
  .footer{background:#F00}
  .sidebar{
    width:245px;
    margin-top:15px;
    margin-left:300px;
    height:500px;
    padding:13px;
    font-size:14px;
    font-style:  italic;
    font-family: 'Arial';
    border: 2px solid #bab89a;
    position: fixed;
    background-color: #FF0000;
     }
.sidebar .content .text{
    position: absolute;
}
  </style>
<script type='text/javascript'>
$(function () {
    var a = $(".sidebar"),
        c = a.offset(),
        d = a.outerHeight(!0),
        e = $(".footer").offset();
    $(document).scroll(function () {
        var b = $(this).scrollTop(),
            b = e.top - (b + d + c.top);
        0 < b ? a.css({
            background: "red",
            top: c.top
        }) : a.css({
            background: "green",
            top: c.top + b
        })
    })
});
</script>
</head>
<body>
<div class="sidebar"></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>

Последний раз редактировалось рони, 19.12.2013 в 14:00.
Ответить с цитированием