How to make footer not visible on scroll except when at the bottom of the page?

Question

I am making a website and have made a footer. However, the downside is that the footer is in the exact same place on the screen no matter where i scroll. I would like it so that the footer is only visible at the very bottom of the html page (where the footer should be). I have used position:fixed; so that it is fixed at the bottom of the page. However the downside is what i have mentioned above. Any suggestions are greatly appreciated:D

Image:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel='shorcut icon' type='image/x-icon' href='circle.ico' />
</head>
<body>

<title>Home</title>

<div class="header">
  <h3 class="logo" id='logo'>a-town youth</h3>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-ellipsis-h"></i>
  </label>

  <ul class="menu" id='navbar'>
    <a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>
    <a href="#section2" onclick="document.getElementById('chk').checked = false">About</a>
    <a href="#section3" onclick="document.getElementById('chk').checked = false">Calendar</a>
    <a href="#section4" onclick="document.getElementById('chk').checked = false">News</a>
    <a href="#section5" onclick="document.getElementById('chk').checked = false">Contact</a>
    <a href="#section6" onclick="document.getElementById('chk').checked = false">Links</a>
    <div class='copyright-info'>
    </div>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>

<style>
body {
  margin:0px;
}
.colour-block {
  background:#34495e;
  width:60%;
  padding:7% 20% 10% 20%;
  color:#fff;
}
.white-block {
  background:#fff;
  width:60%; /*Change this to change padding/margin around text in dividers*/
  padding:7% 20% 10% 20%;
  color:#823A9C;
}


h1 {
  text-align:center;
  font-size:80px;
  font-family:'wire one', serif;
  font-weight:normal;
}
p {
  font-size:20px;
  font-family:'Raleway', serif;
}


/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to right bottom, #34495e 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
}


/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
  width:100%;
  height:100px;
  position:absolute;
  left:0px;
  background: linear-gradient(to left bottom, #fff 49%, #34495e 50%);
}

@media (max-width: 767px){
  .colour-block h1, .white-block h1{ padding-top: 60px;}
  }

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #34495e;
  color: white;
  text-align: center;
}

</style>

<link href='https://fonts.googleapis.com/css?family=Wire+One|Raleway:300' rel='stylesheet' type='text/css'>

<div class="skew-c" id='section1'></div>
<div class="colour-block">
  <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section2'></div>
<div class="white-block">
  <h1>About</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c" id='section3'></div>
<div class="colour-block">
  <h1>Calendar</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section4'></div>
<div class="white-block">
  <h1>News</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-c" id='section5'></div>
<div class="colour-block">
  <h1>Contact</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="skew-cc" id='section6'></div>
<div class="white-block">
  <h1>Links</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class='footer'>
  <p>Copyright © 2020 A-Town Youth - Website Design by Soma Benfell</p>
</div>

<div class="content">

</div>

</body>
</html>

Answer 1

You have two problems.

1 - The css rule:

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #34495e;
  color: white;
  text-align: center;
}

contains position:fixed . This will keep the div in it's original position. Just remove that line.

2 - The div that has the footer class is placed before your content div. This needs to be moved to after the content div.

3- To change the height of the footer, edit the footer rule (as above) and add

padding-top:50px; padding-bottom:50px;

You may want to play around with the numbers there. I would advise learning to use your browser's developer tools (usually accessed via F12). Developer Tools allows you to interactively change styles and inspect elements value, among other tasks.

Answer 2

Just remove the fixed position. Will keep the footer at the bottom of the page.

Answer 3

Make your class footer position: absolute.
Put a div around your class footer and make it position: relative.

How to make footer not visible on scroll except when at the bottom of the page?

Question

3 answers

solution1
1 ACCPTED 2020-12-05 20:59:59

solution2
0 2020-12-05 20:59:06

solution3
0 2020-12-05 21:14:43

How to make footer not visible on scroll except when at the bottom of the page?

Question

3 answers

solution1 1 ACCPTED 2020-12-05 20:59:59

solution2 0 2020-12-05 20:59:06

solution3 0 2020-12-05 21:14:43

solution1
1 ACCPTED 2020-12-05 20:59:59

solution2
0 2020-12-05 20:59:06

solution3
0 2020-12-05 21:14:43