基础 CSS 坚持到底

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，它使设计美观的响应式网站、应用程序和电子邮件变得容易，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Sticky组件允许您在用户向下滚动页面时制作一些停留在页面顶部的内容。粘性组件可用于侧边栏、外部链接或顶部栏。将.sticky类和 [ data-sticky ] 添加到元素以创建粘性元素。粘性元素必须用 [ data-sticky-container ] 包装在一个容器中，这决定了大小和网格布局。

坚持到底：它是粘性类变体之一。在这里，当用户滚动时，粘性元素会粘在底部。要将元素粘贴到底部，请添加.sticky类、[ data-sticky ] 和另外的[ data-stick-to=”bottom” ] 。如果需要，您可以使用两个锚点，即粘性的起点和终点，分别使用data-top-anchor=”elementID”, data-btm-anchor=” elementID ”作为顶部和底部锚点。

Foundation CSS Stick to bottom 属性：

• data-stick-to=”bottom”：这个属性用来让sticky粘到底部。

句法：

示例 1：

HTML

  

  Foundation CSS Stick to bottom
    
    
  
    
    
    
    
    

  

    GeeksforGeeks
    Foundation CSS Sticky
    
        
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG. This is an
                example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.
                This is an example line.
            
  
        
        
            
                
            
        
    
    
        $(document).foundation();
    

  

输出：

基础 CSS 坚持到底

示例 2：

HTML

  

     Foundation CSS Stick to bottom
    
    
  
    
    
    
    
    

  

    GeeksforGeeks
    Foundation CSS Sticky
    
        
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
            
                
                  The image to the right will be sticky when
                  it hits the top of this paragraph element.
                
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
            
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
            
                
                  The image to the right will lose stickiness
                  when it hits the bottom of this paragraph element.
                
                Welcome to GeeksForGeeks. This is an
                example line. Welcome to GFG.This
                is an example line. Welcome to GeeksForGeeks.
                This is an example line. Welcome to GFG.This 
                is an example line. Welcome to GeeksForGeeks. 
                This is an example line. Welcome to GFG.This 
                is an example line.
            
  
        
        
            
                
            
        
    
  
    
        $(document).foundation();
    

  

输出：

基础 CSS 坚持到底

参考： https://get.foundation/sites/docs/sticky.html#stick-to-bottom