问题描述
- 我尝试使用css来粘贴整个部分，但是我不能粘贴整个部分
- 当我尝试使用div时，它可以正常工作，但是当我尝试使用div时，它不能工作。
- 我尝试粘比萨饼部分。我已经在内部div上粘了，但是在整个部分上都没有粘。
请全屏查看。
- 我尝试使用css来粘贴整个部分，但是我不能粘贴整个部分
- 当我尝试使用div时，它可以正常工作，但是当我尝试使用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.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.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,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,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,vegan farm-to-table Williamsburg slow-carb
readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,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,forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
<hr>
</div>
</div>
</div>
</section>解决方法
将position: relative添加到父元素
.parent{
position: relative;
}
.child{
position: sticky;
top: 0
}
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...