Sticky content at bottom of page

The site Header and all the content begins on the bottom of the page.

To see more one scrolls and the content is lifted up into view.
Here is an example used on a web site I made some time ago: https://galleriklevjer.no/

Move the content to the bottom of the page.

One method to add JS and CSS is to add these into separate files and use enqueue to call these into the child theme functions file.

To add files through the functions.php file.
Add the following:

function stickybottomcontent(){ 
 /* wp_register_style( 'stickycontentcss', get_template_directory_uri() . '/css/sticky.css');
 wp_enqueue_style( 'stickycontent' ); */
 
 wp_register_script( 'stickycontent', get_stylesheet_directory_uri() . '/js/sticky.js', array('jquery')); 
 wp_enqueue_script( 'stickycontent' );
}
add_action('wp_enqueue_scripts', 'stickycontent');

The above code shows enqueing/calling/linking to a sticky.css and a sticky.js file.

The easier method is to add a code snippet plugin to where one can add JS and CSS. Or one can add CSS into the customizer.

The Javascript (JS):

jQuery(document).ready(function() {
 $WINDOW = jQuery(window), //define window
 $header = jQuery('.home .site-container'); //in Wrapper of content that will be at bottom
// js function
 function setContainerOffset(){
 $header.css({ top: $WINDOW.height() - 150 }); 
 //$WINDOW.height() is height of browser windw
 } 
 //call function on start
 setContainerOffset();
 //call function on resize of browser
 $WINDOW.resize(setContainerOffset); 
});

Notice the .site-container class tag. The site container is a wrapper containing all the content of the site. Using Twenty Twenty One as an example I would need to replace .site-container with .site. See what the top class is for your theme and add that replace .site-container with that.

NB! I only plan on adding content to the bottom of the page on the front page. I changed .site-container to become .home .site-container, so that only the front page would use this.

The CSS

/* Code for pushing the container to the bottom of the home page. */
.home .site-container {
 position:relative;
 z-index: 12;
 max-width: 1140px;
 margin:0 auto;
 background: #fff;
}

/* top parent container. */
.site-container {
 background-color: #fff;
 max-width: 1140px;
 padding: 10px 0px 10px 0px; 
 margin: auto;
} 

Here one can test out the live code for lifting the content and header into view.
https://jsfiddle.net/paaljoachim/22rL1oh7/10