0

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

这可以使用CSS来完成吗？

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

4

1 回答 1

1

简短的回答：没有。

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

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

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

如何

有很多方法可以完成这种行为。本质上，您需要确定主页部分是否在浏览器窗口中。如果是，则隐藏徽标；否则，它会显示出来。

一种策略是：

  • 通过抓取文档中第二部分的位置（即其 offset().top 位置）来设置徽标将显示的位置。
  • 然后确定第一个部分在窗口内的位置。如果它是 > 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

于 2016-11-27T18:57:58.290 回答