CSS：根据单页导航中的 ID 在一个部分中定位 DIV

Question

我正在开发一个单页 WordPress 网站，我需要在第一部分 (#home) 上隐藏页面的徽标 (#logo)。整个页面是一页纸，所以第一部分不需要徽标，实际上它应该只出现在第一部分下面的其他部分。

这可以使用 CSS 完成吗？

如果是，那么我还想更改第一部分菜单元素的颜色，并为其他部分更改颜色。

Answer 1

简答：否

您需要编写一些 JavaScript 或 jQuery 来确定第一部分（即主页部分）何时不再出现在视图中 window。

徽标通常位于 <header> 内。它是 HTML 标记中的一个元素。它与部分没有关系。使用样式，您可以将其放置在您想要的位置，然后滚动文档以查看其余内容部分。

我假设这是一页纸，您希望 <header> 得到修复。这是一个很好的假设，因为您想在每个部分的同一位置显示徽标，第一个部分除外。

如何

有多种方法可以实现此行为。本质上，您需要确定主页部分是否在浏览器中 window。如果是，则隐藏徽标；否则显示。

一个策略是：

通过抓住文档中第 2 部分的位置（即其 offset().top 位置）来设置徽标的显示位置。
然后确定第一节在 window 中的位置。如果它 > showPosition，那么它就在视野之外。

这里有一些代码可以帮助您入门。您需要根据您的特定需求对其进行调整。

(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

CSS：根据单页导航中的 ID 在一个部分中定位 DIV

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

css

wordpress

onepage-scroll

如何