Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Плавающий блок, замирающий над футером (https://javascript.ru/forum/dom-window/43757-plavayushhijj-blok-zamirayushhijj-nad-futerom.html)

Navaho 19.12.2013 12:40

Плавающий блок, замирающий над футером
 
Привет! Помогите разобраться. :)
Необходимо подключить скрипт для правого сайдбара как тут: http://sticky01.blogspot.ru/2013/09/4.html.

вот мой сss:

Код:


.sidebar{
    width:245px;
    margin-top:15px;
    margin-left:700px;
    height:1230px;
    padding:13px;
    font-size:14px;
    font-style:  italic;
    font-family: 'Arial';
    border: 2px solid #bab89a;
    position: fixed; 
    }
.sidebar .content .text{
    position: absolute;
}

вот JS, который я нашла тут: http://shpargalkablog.ru/2013/09/scroll-block.html


<script>
function offsetPosition(e) {
  var offsetTop = 0;
  do {offsetTop  += e.offsetTop;} while (e = e.offsetParent);
  return offsetTop;
}
var aside = document.querySelector('aside'),
    OP = offsetPosition(aside);

window.onscroll = function() { 

  // window.pageYOffset - прокрутка;
  // document.documentElement.scrollHeight - высота всего документа;
  // aside.offsetHeight - высота элемента
  if (window.pageYOffset > document.documentElement.scrollHeight - 9720 - aside.offsetHeight) {
    aside.className = 'button_bottom';
    aside.style.top = (document.documentElement.scrollHeight - 1230 - aside.offsetHeight - OP) + 'px';
  } else {
    aside.style.top = '0';
    aside.className = (OP < window.pageYOffset ? 'sidebar' : '');
  }

}
</script>


В html блок div class="sidebar" c контентом (текст и картинки)

Скопированный скрипт не работает. что необходимо изменить?

Navaho 19.12.2013 13:16

а что необходимо изменить в коде?

Navaho 19.12.2013 13:28

тогда почему у меня не работает?

Navaho 19.12.2013 13:32

мне надо надо ПОДКЛЮЧИТЬ скрипт К МОЕМУ КОДУ. а сам по-себе он работает, тут и не поспоришь)

Navaho 19.12.2013 13:33

есть еще (другие) знатоки? :)

рони 19.12.2013 13:57

:write: вариант фиксации блока перед футером ...
<!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>

Navaho 19.12.2013 14:10

рони, спасибо за ваш код) а с моим вариантом кода, можно что-то сделать? и без jquery

рони 19.12.2013 14:35

Navaho,
сделайте макет страницы в песочнице http://learn.javascript.ru/play или тут, так быстрее кто-то откликнется, сейчас можно только гадать по вашим фрагментам что и почему у вас неработает

рони 19.12.2013 15:35

Navaho,
Вариант фиксации блока без jquery на фреймворке Vanilla JS ... :dance:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <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:700px;
    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>
function offset(a) {
    for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
    return b
}
window.onload = function () {
    var a = document.querySelector(".sidebar"),
        b = offset(a),
        d = a.offsetHeight + 15, //    margin-top
        e = offset(document.querySelector(".footer"));
    window.onscroll = function () {
        var c = window.pageYOffset || document.documentElement.scrollTop,
            c = e - (c + d + b);
        0 < c ? a.style.top = b + "px" : a.style.top = b + c + "px"
    }
};
</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 16:02

Navaho,
и наконец фиксация блока на чистом js улучшенный вариант ... :write:
изменение стилей блока происходит только в момент соединения/разьединения блока с футером
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <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:400px;
    height:500px;
    padding:13px;
    font-size:14px;
    font-style:  italic;
    font-family: 'Arial';
    border: 2px solid #bab89a;
    position: fixed;
    background-color: #00FF7F;

     }
.sidebar .content .text{
    position: absolute;
}
  </style>
<script>
 function offset(a) {
     for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
     return b
 }
 var s = !0;
 window.onload = function () {
     var a = document.querySelector(".sidebar"),
         b = offset(a),
         f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
         d = a.offsetHeight + parseInt(f.marginTop) || 0,
         e = offset(document.querySelector(".footer"));
     window.onscroll = function () {
         var c = window.pageYOffset || document.documentElement.scrollTop,
             c = e - (c + d + b);
         s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") : (a.style.top = e - d + "px", a.style.position = "absolute"))
     }
 };
</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>


Часовой пояс GMT +3, время: 09:42.