jquery - 如何使 hc-sticky 插件引用其容器

标签 jquery html css

我在我的网站上安装了 hc-sticky 插件,我可以使用此代码使其适用于滚动侧边栏:

<script type="text/javascript">
jQuery(document).ready(function($){
        $('.panel-rand').hcSticky({
        stickTo: document,
        responsive: true,
        bottomEnd: 985,
        innerTop: 12,
        offResolutions: [-1200]        
    });
});
</script>

但问题是您可以在窗口左侧看到它是如何工作的(在此链接:http://www.cumseface.eu/viewtopic.php?t=91),当您滚动到底部时,左侧边栏不会在结束时停止滚动其中的容器。有人可以帮我解决这个问题吗?谢谢。

最佳答案

您的容器是文档而不是父元素;你通过'stickTo'选项设置它。此外,'bottomEnd: 985' 表示“当容器底部和粘 block 底部之间的空间为 985px 时,滚动将停止”。

因此您需要将容器更改为具有所需滚动高度的元素。最接近它的是“.post.bg2”,但在“.panel-rand”之上还有一些额外的 block 。它们的总高度接近 65px,因此我将 bottomEnd 设置为 70 作为补偿。

试试这个:

$('.panel-rand').hcSticky({
    stickTo: '.post.bg2',
    responsive: true,
    bottomEnd: 70,
    innerTop: 12,
    offResolutions: [-1200]        
});

关于jquery - 如何使 hc-sticky 插件引用其容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29240342/

相关文章:

html - pre 标签中的 AngularJS 数据绑定(bind)

css - 在 gtkmm3/gtk3 中以编程方式更改小部件预属性

css - :hover over <div> does not apply to all its child elements

css - selector > selector 和 selector 选择器有什么区别?

javascript - 如何进行自动工具提示验证消息?

javascript - AngularJS - 第一次加载页面时如何设置 ng-disabled 指令的真实值?

javascript - 在jquery中转换日期格式

javascript - ASP.NET MVC 中的日期格式设置

html - 文本装饰没有不起作用

jquery - 在 jQuery 中,如何删除所有出现的 CSS 类,并将它一次添加到标记的父级的父级的特定兄弟级?