Question

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

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

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

我有一些javascript可以防止固定定位的内容溢出到页脚中，但是如何防止它溢出到页眉中...我不确定如何调整javascript我＆＃ 39;我已经习惯了这项工作。

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

感谢
约什

Answer 1

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

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

工作链接： -

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

Answer 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/

希望这有助于某人！

谢谢，
约什

固定位置偏移顶部和底部

2 个答案: