基础 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 ] 属性的容器中，该属性决定了大小和网格布局。

语法：

粘性组件：

• Basic ：通过为元素指定.sticky类和 [data-sticky] 属性，此组件可用于创建可粘贴的内容。
• 高级：在这种情况下，我们可以使用 2 个锚点，即粘性的起点和终点，使用data-top-anchor和data-btm-anchor属性，将“idOfSomething”作为它们的值，用于顶部和底部锚点分别。
• 粘在顶部：这是默认情况，允许粘性元素在用户滚动时粘在顶部。
• Stick to Bottom：此属性提供了另一种使用粘性元素的方法。在这里，当用户滚动时，粘性元素会粘在底部。要将元素粘贴到底部，请添加.sticky类、[ data-sticky ] 和 [ data-stick-to=”bottom” ]。
• 粘性导航：它 允许通过指定添加粘性导航栏或侧导航。粘性类到您的顶部栏。在这里，标题栏被包裹在一个粘性容器中。将数据粘性属性添加到 .标题栏类使它成为一个粘性导航栏。 .title-bar-left类和.title-bar-right类是您可以在其中显示导航栏信息/内容的类。

添加粘性导航的语法：

  

    
 Content 
    
 Content 
  

基础 CSS 粘性类：

• .sticky ：这个类使元素能够被粘到指定的位置。
• cell small-* right ：该类用于创建特定数字的小型单元格 & 与右侧位置对齐。我们还可以指定不同的对齐位置。

基础 CSS 粘性属性：

• [data-sticky]： .sticky 类后跟此属性，它为元素提供各种功能。
• [data-sticky-container]：此属性可用于粘性元素，必须包装在容器中，这将确定大小和网格布局。

示例：此示例说明了 Foundation CSS Sticky。

HTML

 

     
    
    
     
    
    
    
    
    

 

    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 粘性

示例：以下代码是粘性导航的示例。即使页面正在滚动，但标题栏的位置保持不变。

HTML

 

     
    
    
     
    
    
    
    
    

 

    
        
            
                
                    GeeksforGeeks
                
            
            
                
                     GFG 1
                        
                            GFG 1A
                            GFG 1B
                        
                    
                     GFG 2
                        
                            GFG 2A
                            GFG 2B
                        
                    
                    GFG 3
                    GFG 4
                
            
        
        
            GeeksforGeeks
            Foundation CSS Sticky Navigation
             

                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 粘性导航

参考：https://get.foundation/sites/docs/sticky.html