Форум

Navaho · #1 (**permalink**) 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 · #2 (**permalink**) 19.12.2013, 13:16

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

Navaho · #3 (**permalink**) 19.12.2013, 13:28

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

Navaho · #4 (**permalink**) 19.12.2013, 13:32

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

Navaho · #5 (**permalink**) 19.12.2013, 13:33

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

рони · #6 (**permalink**) 19.12.2013, 13:57

вариант фиксации блока перед футером ...

<!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 · #7 (**permalink**) 19.12.2013, 14:10

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

рони · #8 (**permalink**) 19.12.2013, 14:35

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

рони · #9 (**permalink**) 19.12.2013, 15:35

Navaho,
Вариант фиксации блока без jquery на фреймворке Vanilla JS ...

<!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>

рони · #10 (**permalink**) 19.12.2013, 16:02

Navaho,
и наконец фиксация блока на чистом js улучшенный вариант ...

изменение стилей блока происходит только в момент соединения/разьединения блока с футером

<!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>

Форум

Справочник

Discord чат

Курсы javascript