代码之家 › 专栏 › 技术社区 › LauraNMS

如何使用Waypoints js实现粘性元素和偏移量

jquery-waypoints jquery

0

LauraNMS · 技术社区 · 10 月前

我使用的是js路点( http://imakewebthings.com/waypoints/ ). 我使用的是jquery版本和sticky快捷方式:

<script src="/includes/imakewebthings-waypoints-34d9f6d/lib/jquery.waypoints.min.js"></script>
<script src="/includes/imakewebthings-waypoints-34d9f6d/lib/shortcuts/sticky.min.js"></script>

css:

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

我该如何将某物粘在离屏幕顶部一定距离的地方?我有一些元素想贴在屏幕顶部,而另一些元素我想与顶部保持一定距离。我该怎么做?

我试过:

var sticky = new Waypoint.Sticky({
    element: $('#pin-last')[0],
    offset: 80
});

…但它不起作用。

2 回复 | 直到 10 月前

1

0

Website Wizards 10 月前

定义元素到达该偏移点后会发生什么。为此,请向其中添加一个stuckClass。示例:

var sticky = new Waypoint.Sticky({
  element: $('#pin-last')[0], 
  stuckClass: 'stuck',       
  offset: 80                 
});

然后,在CSS中添加:

.stuck {
  position: fixed;
  top: 80px; 
}

2

0

Dan Crews 10 月前

这行得通吗?

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

#pin-last.stuck {
  top: 80px;
}