滚动时显示和隐藏文本

我的“关于”页面分为不同的部分,并且在页面加载时仅会显示标题。我想显示文本正文,然后在用户滚动时再次隐藏。让我知道您是否需要其他信息来确定我要完成的工作。任何帮助将不胜感激。

.abouttext {
	display: none;
	background: rgba(255,255,0.8);
	border-left: solid thick rgba(247,127,0.5);
	border-top-left-radius: 8%;
	border-bottom-left-radius: 8%;
	padding: 2%;
	border-right: solid thick rgba(247,0.5);
	border-top-right-radius: 20% 15%;
	border-bottom-right-radius: 70% 8%;
	border-top: solid thin rgba(247,0.5);
	border-bottom: solid thin rgba(247,0.5); 
}

.abouttext1 {
	display: none;
	background: rgba(255,0.5); 
}

.abouttext2 {
	display: none;
	background: rgba(255,0.5); 
}

.growing {
	font-family: platelet;
	font-size: 400%;
	font-weight: bold;
	color: #f77f00;
	text-shadow: 5px 5px 15px #4f4f4f;
}

.usnavy {
	text-align: right;
	font-family: platelet;
	font-size: 300%;
	font-weight: lighter;
	color: #4f4f4f;
	text-shadow: -5px -5px 5px #f77f00;
}

.usnavy2 {
	text-align: center;
	font-family: platelet;
	font-size: 400%;
	color: #4f4f4f;
	text-shadow: -2px 2px 5px #4f4f4f;
	border-bottom: solid thick #f77f00;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://use.typekit.net/zxa6xyn.css" rel="stylesheet">
<div class="mt-5 my-auto col-9 col-xl-8">
			<h1 class="growing mt-5" id="growing">Growing Up</h1>
			<div id="centerBlock" class="centerBlock"></div>
			<p id="abouttext" class="abouttext mt-5">
				Shane Temple was born in Augusta,Georgia in 1984 to Floyd Temple and Caroline Grimm,but they quickly relocated to the Hampton Roads area of Virginia as his father was in the US Navy at the time as an electronics Technician and frequent moves came with the territory. When Shane was 2 years old his mother gave birth to his little sister,Amber. With a new baby in the family,the Navy decided that was a good time to move the Temples again. This time they were on the way to a suburb of Chicago where they would spend the next several years. At the age of 9,Shane’s little brother,Josh,was born. You know what that meant? Another move. Only this time,Shane’s dad decided to separate from the Navy and the family settled down in Elizabethton,Tennessee. Elizabethton is a small town in the mountains of Northeast Tennessee and this is where Shane would call home. His father started a computer repair business which is probably why Shane has such an affinity for technology today. He spent his formative years doing things most kids his age would do. He made new friends,experienced his first love,and enjoyed skateboarding and riding BMX. After Shane graduated high school in 2002,he worked at several restaurants as a waiter. He did this for about 4 years before he decided that he wanted more out of life.
				</p>
			<h1 class="usnavy" id="usnavy">US Navy(first two years)</h1>
			<div class="centerBlock"></div>
			<p class="abouttext1 mt-5">
				At 22 years of age,Shane followed in his father’s footsteps and enlisted in the United States Navy.   Unlike his father however,Shane went into the aviation side of the Navy as an Aviation Electricians Mate. After basic training in that same suburb of Chicago where he lived until he was 9,he started his naval career in Jacksonville,FL. First for his job training and then to actually start working on aircraft. His first command was HSL-60 where they specialized in SH-60 Seahawk helicopters. In 2007 he deployed with a team from his command on board a frigate named the USS DeWert. The next several months were spent in the waters of the Eastern Pacific Ocean in support of counter narcotics. Basically,they hunted down small boats that were running drugs from South America to the United States. Whenever they found one,they immediately sent one of the two helicopters they had on board to disable the boats,seize the narcotics,and arrest the occupants for return to their home country.  While on deployment,Shane spent time exploring the foreign countries whenever the ship would pull into port for fuel and ship maintenance. This really gave Shane a look into how foreign cultures were very different from what he was used to back in the US. It was in El Salvador where he learned the hard way that when people say not to drink the water in Central and South America,they mean that literally. Not that he deliberately drank the water,but after a few too many Cuba Libres he started to eat the ice not really thinking about it. BIG MISTAKE. They pulled back out to sea the next morning and he had never been more sick in his life than he was for the next 4 days,all because of a few ice cubes. 
				</p>
			<h1 class="usnavy2" id="usnavy2">US Navy(the next 6 years)</h1>
			<div class="centerBlock"></div>
			<p class="abouttext2 mt-5">
				The reason that the Naval portion of Shane’s abbreviated biography is because after deployment,his life took on some dramatic changes. He met a lovely woman,Khala,who would eventually become his wife. Okay,technically,he met her before his deployment but their story didn’t really start until afterwards. In 2008 she gave birth to their first child,a boy that they named Luke. Having a child seemed like the perfect time for Shane to pick up a dangerous hobby,so he bought his first motorcycle. As crazy as that idea was,it proved to be a real blessing that we will get into in just a little bit. Fast-forward to 2010. Shane and Khala had their second child,a beautiful little girl named Adrianna. Almost immediately after Adrianna was born,Shane’s orders were up and the young family of 4 were stationed in New Orleans. I know what you’re thinking. “That sounds like an awesome place to get stationed.” Wrong. New Orleans is a great place to visit,but it is a terrible place to live. It’s extremely humid,nobody knows how to drive,the roads are in terrible shape,and there are insects there that you could not imagine. Nevertheless,they made the best of it and made some great friends. Shane found some relief through photography. His photography was decent,but he really shined with his digital editing skills where he was a natural.
				</p>
		</div>

h213haze 回答:滚动时显示和隐藏文本

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3164462.html

大家都在问