如何使用“位置：粘性；”粘贴部分CSS？

Posted 2023-05-08

【中文标题】如何使用“位置：粘性；”粘贴部分CSS？

【英文标题】：How to sticky section using "position: sticky;" css?

【发布时间】：2020-12-04 00:39:58

【问题描述】：

我尝试使用 css 粘贴整个部分，但我无法粘贴部分 当我尝试使用 div 时它工作正常，但当我尝试使用部分时它不工作。 我尝试粘比萨部分。我已经粘住了内部 div，但没有粘住整个部分。

请全屏查看。

我尝试使用 css 粘贴整个部分，但我无法粘贴部分 当我尝试使用 div 时它工作正常，但当我尝试使用部分时它不工作。 我尝试粘比萨部分。我已经粘住了内部 div，但没有粘住整个部分。

这是我的代码

$(document).ready(function()
  // Add smooth scrolling to all links
  $("a").on('click', function(event) 

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") 
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate(
        scrollTop: $(hash).offset().top
      , 600, function()
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      );
     // End if
  );
);

$(window).scroll(function() 
        var scrollDistance = $(window).scrollTop();

        // Show/hide menu on scroll
        //if (scrollDistance >= 850) 
        //      $('nav').fadeIn("fast");
        // else 
        //      $('nav').fadeOut("fast");
        //
    
        // Assign active class to nav links while scolling
        $('.page-section').each(function(i) 
                if ($(this).position().top <= scrollDistance) 
                        $('.navigation a.active').removeClass('active');
                        $('.navigation a').eq(i).addClass('active');
                
        );
).scroll();

.page-section 
          height: 480px;
          width: 100%;
          padding: 3em;
          background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
          color: white;
          box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
        
        
        .navigation 
          position: sticky;
          width: 100%;
          top: 0px;
          background-color: #999;
          color: #fff;
        
        .all-menu-item
            position: sticky;
          width: 100%;
          top: 0px;  
        
        .navigation__link 
          display: block;
          color: #ddd;
          text-decoration: none;
          padding: 1em;
          font-weight: 400;
        
        .navigation__link:hover 
          background-color: #aaa;
        
        .navigation__link.active 
          color: white;
          background-color: rgba(0, 0, 0, 0.1);
        
        .menu-title
            position: sticky;
            top: 0px;
            padding: 20px;
            background: #fff;
        
        
        .menu-fix
            position: sticky;
            top: 0px;
        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
   <section class="w-100 float-left">
    <div class="container">
        <div class="row">
            <div class="col-12 py-4">
                <h2>Content...</h2>
                <h5>Scroll down to see the Navbar stick</h5>
                
                <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag ***lyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
                    raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation.
                    Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
    
                <hr>
    
                <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                    readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                    forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                    
                <hr>
                
                <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                    readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                    forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                    
                <hr>
                    
            </div>
        </div>
       
    </div>
    </section>
   
<section class="menu-fix w-100 float-left">
<h3>Pizza section</h3>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <nav class="navigation" id="mainNav">
                    <a class="navigation__link" href="#1">Section 1</a>
                    <a class="navigation__link" href="#2">Section 2</a>
                    <a class="navigation__link" href="#3">Section 3</a>
                    <a class="navigation__link" href="#4">Section 4</a>
                        <a class="navigation__link" href="#5">Section 5</a>
                        <a class="navigation__link" href="#6">Section 6</a>
                        <a class="navigation__link" href="#7">Section 7</a>
            </nav>
            </div>
            <div class="col-lg-8">
                <div class="all-menu-item">
                
                   <h2 class="menu-title">Pizza</h2>
                
                <div class="page-section hero" id="1">
                    <h1>Smooth scroll, fixed jump menu with active class</h1>
            </div>
            <div class="page-section" id="2">
                    <h1>Section Two</h1>
            </div>
            <div class="page-section" id="3">
                    <h1>Section Three</h1>
            </div>
            <div class="page-section" id="4">
                    <h1>Section Four</h1>
            </div>
            <div class="page-section" id="5">
                    <h1>Section Five</h1>
            </div>
            <div class="page-section" id="6">
                    <h1>Section Six</h1>
            </div>
            <div class="page-section" id="7">
                    <h1>Section Seven</h1>
            </div>
            </div>
            </div>
        </div>
        </div>
</section>

<section class="w-100 float-left">
        <div class="container">
            <div class="row">
                <div class="col-12 py-4">
                    <h2>Content...</h2>
                    <h5>Scroll down to see the Navbar stick</h5>
                    
                    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag ***lyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
                        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation.
                        Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
        
                    <hr>
        
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                        readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                        forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        
                    <hr>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                        readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                        forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        
                    <hr>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                        readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                        forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                        
                    <hr>
                        
                </div>
            </div>
           
        </div>
    </section>

【问题讨论】：

我无法理解问题所在 - 通过删除不会导致问题的库、脚本和 css 来最小化代码，并包括可能很重要的 CSS 规则（例如 @ 987654325@ - 不会将元素移到其包含元素之外）可能有助于查明问题所在。请查看有关在问题中创建minimal, reproducible example 的社区指南。谢谢。

【参考方案1】：

将position: relative 添加到父元素

.parent
position: relative;

.child
position: sticky;
top: 0