javascript - 固定位置偏移顶部和底部

Question

我有一个我正在使用的网站，就在那儿，但还不完全是:http://joshrodg.com/new/blog/

我正在侧边栏(红色部分)上工作，侧边栏是唯一有内容的部分，只是标准的 WordPress blogroll，但我注意到在页面的最顶部它溢出到标题(黄色节)。

现在侧边栏有一个绝对位置，但侧边栏中的内容有一个固定位置，因此当您浏览博客时，您总是会在同一位置看到搜索栏、链接等。

我有一些 javascript 可以防止固定位置的内容溢出到页脚中，但是如何防止它也溢出到页眉中...我不确定如何调整我已经知道的 javascript用来完成这项工作。

fiddle :https://jsfiddle.net/hh4s6nye/
现场示例: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/
现场示例:http://joshrodg.com/new/blog/

谢谢
乔希

Answer 1

您可以将 z-index 添加到#blog。

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

工作链接:-

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