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

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

  •  0
  • LauraNMS  · 技术社区  · 6 月前

    我使用的是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 回复  |  直到 6 月前
        1
  •  0
  •   Website Wizards    6 月前

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

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

    然后,在CSS中添加:

    .stuck {
      position: fixed;
      top: 80px; 
    }
    
        2
  •  0
  •   Dan Crews    6 月前

    这行得通吗?

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