【问题标题】:sticky sidebar doesn't stop before footer粘性侧边栏不会在页脚之前停止
【发布时间】:2016-11-28 02:28:04
【问题描述】:

我在构建博客时遇到问题,我想知道如何使侧边栏小部件保持粘性并在#footer 之前停止滚动

如何让它在页脚之前停止? 我的小部件正在通过我的页脚,如果有人可以帮助我,我真的很感激,并且肯定其他人也有同样的问题。

这是一个脚本:

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html 
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 

问:如何让它在页脚之前停止?

【问题讨论】:

  • @reinder .. 如果你不介意,你可以检查我的博客元素christcay.blogspot.co.id,有一个 ID 为 HTML3 (PROFIL STMIK BUMI GORA) 的#sidebar 我想在此之前停止的小部件侧边栏#页脚 ID 为 HTML4 (CHRISTIANTO D,WIBOWO).. 非常感谢
  • @reinder .. 是的,它是粘性的,但是当我或你滚动它时,粘性的#right 侧边栏会一直到我的#footer,我需要你的帮助(请..请)停止那在我的#footer 之前是粘性的,所以粘性不会关闭我的#footer,我试图使用 variabel limit 来阻止它: var limit = bs_sticky ('#HTML4').offset().top - stickyHeight - 20;但它不起作用(我使用谷歌浏览器测试它)非常感谢。
  • 我认为,在 java、javascript 等中没有什么是不可能的,但事实证明在 java、javascrpt 等中存在“不可能”。请主代码给我一些建议,如何制作我的浮动/粘性右侧边栏在页面末尾没有关闭到我的页脚,我不明白技术上的代码语言是如何说的,事实上那是浮动/粘性靠近我的页脚..只是希望它停止浮动/sticky 在我的页脚之前,拜托拜托,我求你掌握代码......作为编码初学者,我尝试了很多方法,但它总是搞砸......拜托。谢谢
  • @reinder 对不起大哥,无意冒犯...我只是想传达信息并说服自己作为初学者,“没有什么是不可能的学习代码...并相信它始终是一条出路“别走开,请帮帮我
  • 我在这个论坛上也找到了答案 (stackoverflow.com/questions/10669175/…),在我替换了上述问题中的所有现有代码之后,它也运行得不好。问题出在 jquery 上,显然我在分配 jquery 之后,所有代码运行顺利。在我的博客中,有一个用于 Sticky Sidebar 小部件的 Jquery(我将它正好放在 下方而不是 上方),另外一个用于主页上的 Jquery Slider,最后它运行良好。

标签: javascript jquery html css


【解决方案1】:

我的问题现在已经解决了,解决方案在this link,但是,它也不会很完美,我只是在这个粘性侧边栏小部件的下方添加了Jquery,并在主页上再添加了一个用于图像滑块的Jquery,最终一切顺利。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-27
    • 2023-04-02
    • 1970-01-01
    • 2016-06-09
    • 2015-08-22
    • 1970-01-01
    • 2013-09-07
    相关资源
    最近更新 更多