[SOLVED] CSS: Target a DIV within a Section based on its ID in a One-Pager

CSS: Target a DIV within a Section based on its ID in a One-Pager

I am working on a one-pager WordPress site, and I need to hide the logo of the page (#logo) on the first section (#home). The whole page is a one-pager, so the first section does not need the logo, in fact it should only appear for the other sections below the first one.

Can this be accomplished using CSS?

If it is, then I also want to change the color of the menu elements for the first section, and be something else for the others.

Solution

Short answer: No.

You will need to write some JavaScript or jQuery to determine when the first section (i.e. home section) is no longer in the view window.

The logo is typically within the <header>. It's one element within the HTML markup. It does not have a relationship to the sections. With styling, you position it where you want and then scroll the document to view the rest of the content sections.

I assume with this being a one-pager, you want the <header> to be fixed. It's a good assumption since you want to display the logo in the same spot for each section, except the first one.

How

There are many ways to accomplish this behavior. Essentially, you need to determine if the home section is in the browser window or not. When it is, the logo is hidden; else, it's displayed.

One strategy is:

Set the position where the logo will show by grabbing the 2nd section's position in the document (i.e. its offset().top position).
Then determine where the 1st section is within the window. If it's > showPosition, then it's out of view.

Here's some code to get you started. You'll need to adapt it for your specific needs.

(function ( $, window, document ) {
"use strict";

var sectionContainers,
	showPosition = 400;

var init = function () {
	initSection();
	logoHandler();
}

function initSection() {
	sectionContainers = $( '.section-container' );
	showPosition = $( sectionContainers[1] ).offset().top;
}

function logoHandler() {
	var $logo = $( '#logo' );

	if ( $( sectionContainers[0] ).offset().top >= showPosition ) {
		$logo.show();
	}


	$( window ).scroll( function () {
		if ( $( this ).scrollTop() > showPosition ) {
			$logo.show();
		} else {
			$logo.hide();
		}
	} );
}

$( document ).ready( function () {
	init();
} );

}( jQuery, window, document ));

body {
  color: #fff;
}

.site-header {
  position: fixed; 
}

.site-logo {
  font-weight: bold;
  border: 5px solid #fff;
  padding: 10px;
}

.section-container {
  width: 100%;
  height: 400px;
  text-align: center;
  padding: 50px 5%;
  background-color: #627f00;
}

.section-container:nth-child(odd) {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
  <p id="logo" class="site-logo" itemprop="headline" style="display: none;">Logo</p>
</header>
<section id="home" class="section-container">
  this is the home section
</section>
<section id="about" class="section-container">
  this is the about section
</section>
<section id="about" class="section-container">
  this is the portfolio section
</section>

JSFiddle