Фиксированная позиция смещена сверху и снизу

Question

У меня есть сайт, над которым я работаю, он уже есть, но не совсем: http://joshrodg.com/new/blog/

Я работаю на боковой панели (красный раздел), боковая панель - единственный раздел ссодержимое, только стандартный блогролл WordPress, но я заметил, что в самом верху страницы он перетекает в заголовок (желтый раздел).

Прямо сейчас эта боковая панель имеет абсолютную позицию, но содержимое вбоковая панель имеет фиксированное положение, поэтому при навигации по блогу вы всегда видите панель поиска, ссылки и т. д. в одной и той же позиции.

У меня есть некоторый JavaScript, который предотвращает переполнение содержимого с фиксированной позицией внижний колонтитул, но как мне предотвратить его переполнение в заголовок ... Я не уверен, как настроить javascript, который я уже использую, чтобы заставить это работать.

Fiddle: https://jsfiddle.net/hh4s6nye/
Live Пример: http://joshrodg.com/new/blog/

Код:

<div id="head">
    <h4>This is the header</h4>
    <p>This is the header</p>
</div>

<div id="blog">
    <section>
        <div class="wrap">
            <h4>Your title here</h4>
            <p>Your content here</p>
        </div>
    </section>
    <section>
        <div class="wrap">
            <h4>Your title here</h4>
            <p>Your content here</p>
        </div>
    </section>
    <div id="side">
        <div class="fixed">
            <h4>Your title here</h4>
            <p>Your content here</p>
        </div>
    </div>
</div>

<div id="foot">
    <h4>This is the footer</h4>
    <p>This is the footer</p>
</div>

CSS:

body {
      background: #ff00ff;
}

.wrap {
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      width: 1000px;
}

/* Head */
#head {
      background: #ffff00;
      height: 500px;
}

/* Blog */
#blog {
      overflow: hidden;
      position: relative;
}

 section {
      color: #fff;
}

 section:nth-child(even) {
      background: #000;
}

 section:nth-child(odd) {
      background: #0000ff;
}

 section .wrap {
      min-height: 500px;
}

/* Side */
#side {
      background: #ff0000;
      color: #fff;
      height: 100%;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      width: 300px;
}

#side .fixed {
      bottom: 10px;
      position: fixed;
}

/* Foot */
#foot {
      background: #00ff00;
      height: 500px;
}

JS:

<script>
      $(document).ready(function(){
           function checkOffset() {
                if($('#side .fixed').offset().top + $('#side .fixed').height() >= $('#foot').offset().top - 10) $('#side .fixed').css('position', 'absolute');
                if($(document).scrollTop() + window.innerHeight < $('#foot').offset().top) $('#side .fixed').css('position', 'fixed'); // restore when you scroll up
    }
      $(document).scroll(function() {
           checkOffset();
        });
    });
 </script>

Fiddle: https://jsfiddle.net/hh4s6nye/
Live Пример: http://joshrodg.com/new/blog/

СпасибоДжош

Answer 1

Хорошо ... итак, после продолжительного поиска я смог найти: https://github.com/senff/Sticky-Anything. Это также доступно в виде плагина WordPress: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Это плагин jQuery, который позволяет вам делать что угодно.

Итак, в основном я удалил существующий JS, который использовал, и добавил jq-sticky-anything.min.js в свою папку JS. Затем я настроил параметры:

<script>
    $(document).ready(function(){
        $('#side .fixed').stickThis({
            pushup: '#foot'
        });
    });
</script>

Есть и другие варианты, но для меня все, что я использую, - это остановка моего липкого элемента в нижнем колонтитуле.

HTML не изменился, CSS изменился незначительно, и это было fixed класс:

.fixed {
    padding: 20px;
}

Итак, по сути, теперь jQuery контролирует фиксированный div.

Это отличное решение, потому что оно делает именно то, что я хочу. Боковая панель прокручивается, но содержимое никогда не обрезается и не закрывается.

Живой пример: http://joshrodg.com/new/blog/
JS Fiddle: https://jsfiddle.net/75fdsqhr/5/

Надеюсь, это кому-нибудь поможет!

Спасибо,
Джош

Answer 2

Вы можете добавить z-index в #blog.

/* Blog */
#blog {
  overflow: hidden;
  position: relative;
  z-index: -1;
}

Рабочая ссылка: -

https://jsfiddle.net/hh4s6nye/1/