Jquery航点粘滞问题答案

【问题标题】：Jquery waypoint stickey issuesJquery航点粘滞问题
【发布时间】：2013-04-02 22:12:14
【问题描述】：

我正在尝试使用 jquery waypoints 来产生一些粘性导航，但我遇到了问题。

在页面上

<script src="js/waypoints-sticky.min.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/waypoints-sticky.js"></script>
<script type="text/javascript" charset="utf-8">


    $(document).ready(function(){
         $(window).resize(function(){
             $('#mainsplash').css("height", ($(window).height() - 200) + "px");
         });
         $('#mainsplash').css("height", ($(window).height() - 200) + "px");
         $('.sticky1').waypoint('sticky', {
          offset: 0 // Apply "stuck" when element 30px from top
        });
    });


</script>

CSS

.stuck{position: fixed; top: 0;}

问题 1：似乎不适用于 div？如果我应用一个带有“sicky1”类的 div，它什么也不做。但是，当我将“stick1”类应用于 H1 或 A 标签时，它可以工作。有没有办法在 div 上使用它？

问题2：有没有一种方法可以将粘性应用于多个元素，然后在到达顶部时让它们彼此下方。

基本上，我试图做的是创造一种手风琴效果。所以可以说我的页面有 3 个部分。

产品 - 内容关于 -内容接触 -内容。

当用户滚动到底部时，这三个部分应该贴在页面的顶部，并在另一个之下。

即（这些应该在一个下一个旁边）产品关于联系方式

内容—— -页脚-

希望这是有道理的。 Jquery 不是我的强项。

【问题讨论】：

标签： jquery sticky jquery-waypoints

【解决方案1】：

没关系，我想通了。我不确定为什么它不能在 div 上工作，但它突然开始工作了。通过在 div 上的 css 中设置 margin-top 并在 jquery 中设置偏移量，我能够实现手风琴效果。

【讨论】：