固定位置偏移顶部和底部

Question

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

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

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

我有一些 javascript 可以防止 fixed-positioned 内容溢出到页脚，但是如何防止它也溢出到 header...我'我不确定如何调整我已经用来完成这项工作的 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;
}

工作Link:-

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

Answer 2

好的...所以，在继续搜索之后我找到了：https://github.com/senff/Sticky-Anything. This is also available as a WordPress plugin: 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 class:

.fixed {
    padding: 20px;
}

所以，基本上 jQuery 现在控制着固定的 div。

这是一个很好的解决方案，因为它完全符合我的要求。边栏滚动，但内容绝不会以任何方式被截断或覆盖。

实例：http://joshrodg.com/new/blog/
JS Fiddle: https://jsfiddle.net/75fdsqhr/5/

希望这对某人有所帮助！

谢谢，
乔什

固定位置偏移顶部和底部

Fixed position offset top and bottom

javascript

css

sidebar

fixed

offset