Web开发新手求助：为旅游初创网站添加滚动可见的下方内容

Hey there! Let's get that tour section sitting properly below your homepage content so it only shows up when you scroll. Here's what's going wrong and how to fix it step by step:

1. Fix the Page Height & Background Setup #

Right now, your page isn't stretching to fill the full viewport height, which is why the tour section is overlapping with your homepage content. Let's update the base styles:

html { 
  scroll-behavior: smooth; 
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(https://i.pinimg.com/originals/e5/5c/e0/e55ce0b3aa7f8f1c520516dae8f691bf.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Keeps background fixed while scrolling (optional but nice) */
}

2. Make Your Homepage Hero Section Full-Screen #

Your main homepage content needs to take up the entire screen so the tour section has to be scrolled to. We'll use min-height: 100vh to ensure it fills the viewport:

#hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#content { 
  text-align: center; 
  /* Removed padding-top:25% since we're using flexbox to center content */
}

Then update your HTML to wrap the homepage content in this hero section:

<div class="container" id="hero-section">
  <div class="row">
    <div class="col-lg-12">
      <div id="content">
        <h1 class='fade-in'> Wishy Travels </h1>
        <h3 id="fade-in">Don't listen to what they say, GO SEE.</h3>
        <hr>
        <button type="button" class="btn btn-light">EXPLORE!</button>
      </div>
    </div>
  </div>
</div>

3. Style the Tour Section Correctly #

Your #secondPage had invalid CSS properties (height: relative and float: bottom don't exist). Let's fix that and make the section readable:

#secondPage {
  min-height: 100vh; /* Optional: makes this section full-screen too */
  background-color: #ffffff; /* White background so text is readable against the main background */
  padding: 6rem 0;
  text-align: center;
}

#secondPage h2 {
  color: #333; /* Dark text for contrast */
  font-family: 'Satisfy', cursive; /* Match your homepage's nice font */
}

Also, remove the duplicate <div id="heading"> The Various Tours we do! </div> since you already have the title in #secondPage.

4. Clean Up Duplicate Animations #

You had two identical @keyframes fadeIn rules, which will cause conflicts. Combine them into one:

.fade-in, #fade-in {
  animation: fadeIn 3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Full Modified Code #

Here's all the code put together correctly:

CSS

html { 
  scroll-behavior: smooth; 
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(https://i.pinimg.com/originals/e5/5c/e0/e55ce0b3aa7f8f1c520516dae8f691bf.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#content { 
  text-align: center; 
}

@font-face {
 font-family: 'Gloss And Bloom Regular';
 font-style: normal;
 font-weight: normal;
 src: local('Gloss And Bloom Regular'), url('Gloss_And_Bloom.woff') format('woff');
}

h1 {
 font-family: 'Gloss And Bloom Regular';
 font-size: 7em;
 color: white;
 text-shadow: 0px 4px 3px orange;
}

h3 { 
  font-family: 'Satisfy', cursive; 
  color: white 
}

hr {
 border: 0;
 clear: both;
 display: block;
 width: 400px;
 border-top: 1px solid #f8f8f8;
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fade-in, #fade-in {
  animation: fadeIn 3s;
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

.navbar-brand:hover { 
  background-color: yellow; 
  color: white; 
}

#secondPage {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 6rem 0;
  text-align: center;
}

#secondPage h2 {
  color: #333;
  font-family: 'Satisfy', cursive;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wishy Travels</title>
  <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
  <!-- Added Bootstrap CSS (you had the JS but missed this!) -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Wishy</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Sign Up </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container" id="hero-section">
    <div class="row">
      <div class="col-lg-12">
        <div id="content">
          <h1 class='fade-in'> Wishy Travels </h1>
          <h3 id="fade-in">Don't listen to what they say, GO SEE.</h3>
          <hr>
          <button type="button" class="btn btn-light">EXPLORE!</button>
        </div>
      </div>
    </div>
  </div>

  <div id="secondPage">
    <h2>THE VARIOUS TOURS WE DO</h2>
    <!-- Add your tour content here later -->
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Quick note: I added the Bootstrap CSS link to your HTML head because you were using Bootstrap components like navbar but didn't include the CSS, which would break some styling.

Now when you load the page, your homepage will fill the entire screen, and you'll have to scroll down to see the tour section. Perfect!

内容的提问来源于stack exchange，提问作者Anugrah Bhatt