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

Question

• I try to sticky full section using css but i cant sticky section
• when i try with div it's working fine but when i try with section it's not working.
• I try to sticky pizza section. i already sticky inner div but not sticky full section.

Please view in full screen.

• I try to sticky full section using css but i cant sticky section
• when i try with div it's working fine but when i try with section it's not working.
• I try to sticky pizza section. i already sticky inner div but not sticky full section.

Here is my code

 $(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 Brooklyn 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 Brooklyn 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>

Answer 1

add position: relative to parent element

.parent{
position: relative;
}
.child{
position: sticky;
top: 0
}