固定位置偏移顶部和底部答案

【问题标题】：Fixed position offset top and bottom固定位置偏移顶部和底部
【发布时间】：2018-05-10 17:41:04
【问题描述】：

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

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

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

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

小提琴：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>

小提琴：https://jsfiddle.net/hh4s6nye/
实例：http://joshrodg.com/new/blog/

谢谢
乔什

【问题讨论】：

标签： javascript css offset fixed sidebar

【解决方案1】：

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

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

工作链接：-

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

【讨论】：

您好，谢谢您的建议，我添加了 z-index，但这会切断搜索框和内容顶部的其他一些链接：joshrodg.com/new/blog。有没有办法调整 JS 以防止固定内容 div 向上滚动超过某个点，从而使所有内容保持可见？

【解决方案2】：

好的...所以，在继续搜索之后，我找到了：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 小提琴：https://jsfiddle.net/75fdsqhr/5/

希望这对某人有所帮助！

谢谢，
乔什

【讨论】：