Hey there! Let's get that scrollable tour section working properly for your Wishy Travels site. The core issue right now is that your hero homepage section isn't taking up the full height of the browser window, so your tour heading is showing up right alongside your logo and main content instead of being hidden until you scroll down. Here's how to fix this step by step:

Step 1: Fix Viewport Height & Background Settings #

First, we need to make sure your html and body elements are set up to support full-screen content, and lock the background image in place for a cleaner hero section:

html {
  scroll-behavior: smooth;
  height: 100%; /* Ensure full viewport height support */
}

body {
  margin: 0; /* Remove default body margin to avoid gaps */
  min-height: 100vh; /* Make body take at least full viewport height */
  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; /* Keep background fixed while scrolling */
}

Step 2: Make the Hero Section Fill the Viewport #

Your main content container needs to take up the remaining height of the viewport after the navbar. We'll use flexbox to center content vertically and ensure the section fills the screen:

/* Add this wrapper class for the hero section */
.hero-container {
  min-height: calc(100vh - 56px); /* Subtract default Bootstrap navbar height (~56px) */
  display: flex;
  align-items: center;
  justify-content: center;
}

#content {
  text-align: center;
  /* Remove padding-top: 25% — flexbox handles centering now */
}

Step 3: Clean Up the Tour Section CSS #

Your original #secondPage had invalid properties (like height: relative and float: bottom which don't exist). Let's fix that and add styling for readability:

#secondPage {
  text-align: center;
  padding: 5rem 0; /* Add padding to space it from the hero section */
  background-color: rgba(255,255,255,0.9); /* Semi-transparent background for text readability */
  min-height: 100vh; /* Optional: Make this section full height too */
}

/* Remove the redundant #heading style — we'll use #secondPage for the tour title */

Step 4: Update Your HTML Structure #

Adjust your HTML to use the new wrapper and clean up redundant elements (plus add the missing Bootstrap CSS link!):

<title>Wishy Travels</title>
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<!-- Add 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">

<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>

<!-- Wrap hero content in the new .hero-container -->
<div class="hero-container">
  <div class="container">
    <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>

<div id="secondPage">
  <h2>THE VARIOUS TOURS WE DO</h2>
  <!-- Add your tour cards/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>

Quick Explanations for Newbies: #

• min-height: 100vh makes an element take at least the full height of your browser window (vh = viewport height).
• We subtracted the navbar height to ensure your hero content doesn't get cut off by the fixed navbar.
• background-attachment: fixed keeps your hero background image in place while scrolling, a popular design choice for travel sites.
• The semi-transparent background on the tour section ensures your text stays readable over the background image.

Now when you scroll down, the tour section will sit below the full-screen hero area, giving you that classic scrollable website flow you're aiming for!

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