jQeury-選單固定於瀏覽器上方

上方配置一張圖片，因為自適應效果計算此區塊的高度後，將 Hander 的高度和下方的選單區塊做 fixed 的切換。

<div id="wrapper">
	<div id="headerTopicContainer">
		<img src="https://unsplash.it/2000/750?image=899" alt="">
	</div>
	<header id="headerContainer">
		<div class="inner">
			<h1 id="siteID">jQuery <span class="small">DESIGN Jimmy_Wu</span></h1>
			<nav id="navigation">
				<ul >
					<li><a href="#">Home</a></li>
					<li><a href="#">News</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<div id="contentContainer">
		<div id="entriesContainer" class="inner">
			<article class="post">
				<div class="entry-thumbnail"><img alt="" src="https://unsplash.it/200/200?image=900"></div>
				<div class="entry-contentContainer">
					<header class="entry-header">
						<h1 class="entry-title"><a href="#"rel="bookmark">使用外掛簡單的將目前位置載入到GoogleMaps</a></h1>
					</header>
					<div class="entry-content clearfix">
						<p>上次接紹了在複數的格式設計中依據固定分類、固定葉面或TOP頁面等場所以is_home切換顯示的圖片。</p>
						<p>本次要介紹存取企業網頁會經常看到的載入Google Maps的外掛:「Google Maps v3 Shortcode」。</p>
						<p class="read_the_rest"><a href="http://www.html5-memo.com/mdn01/wordpress15/" target="_blank" class="btn" rel="noopener noreferrer">更多... <span class="glyphicon glyphicon-chevron-right"></span></a></p>
					</div>
				</div>
			</article>
			<article class="post">
				<div class="entry-thumbnail"><img alt="" src="https://unsplash.it/200/200?image=901"></div>
				<div class="entry-contentContainer">
					<header class="entry-header">
						<h1 class="entry-title"><a href="#"rel="bookmark">透過is_home等分支條件依照各類別在固定頁面上顯示圖片</a></h1>
					</header>
					<div class="entry-content clearfix">
						<p>複數的格式設計中依據固定分類、固定葉面或TOP頁面等場所以is_home切換顯示的圖片。</p>
						<p>這樣不論是是商務或原創的網站，即使沒有自行設定也能夠適當的自動顯示。</p>
						<p class="read_the_rest"><a href="http://www.html5-memo.com/mdn01/wordpress14/" target="_blank" class="btn" rel="noopener noreferrer">更多... <span class="glyphicon glyphicon-chevron-right"></span></a></p>
					</div>
				</div>
			</article>
			<article class="post">
				<div class="entry-thumbnail"><img alt="" src="https://unsplash.it/200/200?image=903"></div>
				<div class="entry-contentContainer">
					<header class="entry-header">
						<h1 class="entry-title"><a href="#"rel="bookmark">使用WordPress query_posts控制特定分類顯示與顯示件數的方法</a></h1>
					</header>
					<div class="entry-content clearfix">
						<p>本次為了只顯示特定類別的描述項目與顯示件數，將介紹關於「query_posts」的使用方法。</p>
						<p>query_posts可以實現各種特殊的需求，像是獲得特定的文章日誌或排除某一分類等。</p>
						<p class="read_the_rest"><a href="http://www.html5-memo.com/mdn01/wordpress13/" target="_blank" class="btn" rel="noopener noreferrer">更多... <span class="glyphicon glyphicon-chevron-right"></span></a></p>
					</div>
				</div>
			</article>
			<article class="post">
				<div class="entry-thumbnail"><img alt="" src="https://unsplash.it/200/200?image=904"></div>
				<div class="entry-contentContainer">
					<header class="entry-header">
						<h1 class="entry-title"><a href="#"rel="bookmark">製作各WordPress項目的圖示變更分歧</a></h1>
					</header>
					<div class="entry-content clearfix">
						<p>可依據發佈項目的類別設定對應的圖示。</p>
						<p>可清楚了解更新資訊等複數的分類資訊，也可以圖示、分色的方式區分發佈人，請一定要試用看看。</p>
						<p class="read_the_rest"><a href="http://www.html5-memo.com/mdn01/wordpress12/" target="_blank" class="btn" rel="noopener noreferrer">更多... <span class="glyphicon glyphicon-chevron-right"></span></a></p>
					</div>
				</div>
			</article>
			<article class="post">
				<div class="entry-thumbnail"><img alt="" src="https://unsplash.it/200/200?image=905"></div>
				<div class="entry-contentContainer">
					<header class="entry-header">
						<h1 class="entry-title"><a href="#"rel="bookmark">使用WordPress的客製化選單製作瀏覽列</a></h1>
					</header>
					<div class="entry-content clearfix">
						<p>WordPress3.x後新增了客製化選單的項目，可用以製作商務網站所需要的瀏覽列等選單功能。</p>
						<p class="read_the_rest"><a href="http://www.html5-memo.com/mdn01/wordpress11/" target="_blank" class="btn" rel="noopener noreferrer">更多...<span class="glyphicon glyphicon-chevron-right"></span></a></p>
					</div>
				</div>
			</article>
		</div>
		<!--/entriesContainer --> 
	</div>
	<!--/contentContainer -->
	<footer id="footerContainer">
		<div class="inner">
			<p id="copyright">Copyright&copy; jQuery Design Jimmy_Wu All Rights Reserved.</p>
		</div>
	</footer>
	<!-- /footer --> 
</div>
<!--/wrapper -->

</div>

<h1 id="siteID">jQuery <span class="small">DESIGN Jimmy_Wu</span></h1>

<ul >

<li><a href="#">Profile</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

</header>

<h1 class="entry-title"><a href="#"rel="bookmark">使用外掛簡單的將目前位置載入到GoogleMaps</a></h1>

</header>

<p>上次接紹了在複數的格式設計中依據固定分類、固定葉面或TOP頁面等場所以is_home切換顯示的圖片。</p>

<p>本次要介紹存取企業網頁會經常看到的載入Google Maps的外掛:「Google Maps v3 Shortcode」。</p>

</div>

</article>

<h1 class="entry-title"><a href="#"rel="bookmark">透過is_home等分支條件依照各類別在固定頁面上顯示圖片</a></h1>

</header>

<p>複數的格式設計中依據固定分類、固定葉面或TOP頁面等場所以is_home切換顯示的圖片。</p>

<p>這樣不論是是商務或原創的網站，即使沒有自行設定也能夠適當的自動顯示。</p>

</div>

</article>

<h1 class="entry-title"><a href="#"rel="bookmark">使用WordPress query_posts控制特定分類顯示與顯示件數的方法</a></h1>

</header>

<p>本次為了只顯示特定類別的描述項目與顯示件數，將介紹關於「query_posts」的使用方法。</p>

<p>query_posts可以實現各種特殊的需求，像是獲得特定的文章日誌或排除某一分類等。</p>

</div>

</article>

<h1 class="entry-title"><a href="#"rel="bookmark">製作各WordPress項目的圖示變更分歧</a></h1>

</header>

<p>可依據發佈項目的類別設定對應的圖示。</p>

<p>可清楚了解更新資訊等複數的分類資訊，也可以圖示、分色的方式區分發佈人，請一定要試用看看。</p>

</div>

</article>

<h1 class="entry-title"><a href="#"rel="bookmark">使用WordPress的客製化選單製作瀏覽列</a></h1>

</header>

<p>WordPress3.x後新增了客製化選單的項目，可用以製作商務網站所需要的瀏覽列等選單功能。</p>

</div>

</article>

</div>

</div>

</div>

</footer>

</div>

@charset 'utf-8';
/*
style.css
*/

body {
  position: relative;
  font-size: 62.5%;
  line-height: 1.8;
  margin: 0;
}

h1,h2,p,span,li {
  font-family: 'Roboto Condensed', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
}

a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.inner {
  position: relative;
  max-width: 1080px;
  min-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#wrapper {
  width: 100%;
}

#headerContainer {
  position: absolute;
  z-index: 100;
  width: 100%;
  background: rgba( 0, 0, 0, 0.8);
  box-shadow:0px 3px 5px #999;
}

#headerTopicContainer {
  position: relative;
  background: #000;
	min-height: 100vh;
}
#headerTopicContainer img {
  display: block;
  margin: 0 auto;
  /* width: 100%; */
  height: auto;
	max-width:100%;
	max-height:100vh;
}

#siteID {
  font-size: 3.0em;
  color: #fff;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 0 8px;
  padding: 12px 0 14px;
}
#siteID .small {
  color: #fff;
  font-size: 0.7em;
}

#navigation {
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
  z-index: 10;
}
#navigation ul,
#navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigation li {
  float: left;
  margin: 1px 0 0 1px;
}
#navigation a {
  display: block;
  color: #fff;
  font-size: 1.6em;
  line-height: 1;
  text-align: center;
  padding: 20px 2em 21px;
  background: rgba( 255, 255, 255, 0.1);
}
#navigation a:hover {
  color: #333;
  background: rgba( 255, 255, 255, 0.8);
}

#footerContainer {
  position: relative;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  background: #000;
  padding: 12px 0;
  behavior: url(PIE.htc);
}

#copyright{
  color: #fff;
  text-align: right;
  font-size: 1.4em;
  margin: 0;
}





#contentContainer {
  margin: 40px 0;
}
#entriesContainer {
  box-shadow: 0 0 20px rgba( 0, 0, 0, 0.1);
}
.post {
  padding: 3% 0;
  margin: 0 3%;
  padding-bottom: 2em;
  margin-bottom: 1em;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
}
.post:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.post .entry-contentContainer {
  float: right;
  width: 72%;
}
.post .entry-thumbnail {
  float: left;
  width: 25%;
}
.post .entry-thumbnail img {
  width: 100%;
  height: auto;
}
.post h1 {
  margin: -0.15em 0 0.4em;
  font-size: 2.8em;
  line-height: 1.15;
}
.post p {
  font-size: 1.4em;
}
.post h1 a {
  text-decoration: none;
}
.post .read_the_rest a.btn {
  display: block;
  width: 50%;
  color: #fff;
  text-align:center;
  margin: 0 0 0 auto;
  padding-top: 15px;
  padding-bottom: 15px;
  background: #000;
  border-radius: 8px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

@charset 'utf-8';

style.css

body {

position: relative;

font-size: 62.5%;

line-height: 1.8;

margin: 0;

}

h1,h2,p,span,li {

font-family: 'Roboto Condensed', Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳＰゴシック", "MS PGothic", sans-serif;

color: #000;

}

a, a.btn {

text-decoration: none;

-webkit-transition: all 0.4s linear;

transition: all 0.4s linear;

}

.inner {

position: relative;

max-width: 1080px;

min-width: 720px;

width: 100%;

margin-left: auto;

margin-right: auto;

}

#wrapper {

width: 100%;

}

#headerContainer {

position: absolute;

z-index: 100;

width: 100%;

background: rgba( 0, 0, 0, 0.8);

box-shadow:0px 3px 5px #999;

}

#headerTopicContainer {

position: relative;

background: #000;

min-height: 100vh;

}

#headerTopicContainer img {

display: block;

margin: 0 auto;

/* width: 100%; */

height: auto;

max-width:100%;

max-height:100vh;

}

#siteID {

font-size: 3.0em;

color: #fff;

line-height: 1.1;

font-weight: 400;

margin: 0 0 0 8px;

padding: 12px 0 14px;

}

#siteID .small {

color: #fff;

font-size: 0.7em;

}

#navigation {

position: absolute;

right: 0;

top: 0;

overflow: hidden;

z-index: 10;

}

#navigation ul,

#navigation li {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

float: left;

margin: 1px 0 0 1px;

}

#navigation a {

display: block;

color: #fff;

font-size: 1.6em;

line-height: 1;

text-align: center;

padding: 20px 2em 21px;

background: rgba( 255, 255, 255, 0.1);

}

#navigation a:hover {

color: #333;

background: rgba( 255, 255, 255, 0.8);

}

#footerContainer {

position: relative;

left: 0;

bottom: 0;

z-index: 100;

width: 100%;

background: #000;

padding: 12px 0;

behavior: url(PIE.htc);

}

#copyright{

color: #fff;

text-align: right;

font-size: 1.4em;

margin: 0;

}

#contentContainer {

margin: 40px 0;

}

#entriesContainer {

box-shadow: 0 0 20px rgba( 0, 0, 0, 0.1);

}

.post {

padding: 3% 0;

margin: 0 3%;

padding-bottom: 2em;

margin-bottom: 1em;

border-bottom: 1px solid #e0e0e0;

overflow: hidden;

}

.post:last-child {

border-bottom: none;

margin-bottom: 0;

}

.post .entry-contentContainer {

float: right;

width: 72%;

}

.post .entry-thumbnail {

float: left;

width: 25%;

}

.post .entry-thumbnail img {

width: 100%;

height: auto;

}

.post h1 {

margin: -0.15em 0 0.4em;

font-size: 2.8em;

line-height: 1.15;

}

.post p {

font-size: 1.4em;

}

.post h1 a {

text-decoration: none;

}

.post .read_the_rest a.btn {

display: block;

width: 50%;

color: #fff;

text-align:center;

margin: 0 0 0 auto;

padding-top: 15px;

padding-bottom: 15px;

background: #000;

border-radius: 8px;

}

;(function (d, $) {

	var $window = $(window),
	$container = $('#headerTopicContainer'),
	$header = $('#headerContainer'),
	$headerAfter = $header.next(),
	headerY = $header.height(),
	containerY = $container.height();

	function initialize(){
		$window.on('scroll', scroll);
		$window.trigger('scroll');
	};

	// 滾動時控制的函式
	function scroll(){

		// 當滾動的量小於containerY更高，執行_fixed功能
		// 當滾動的量小於containerY更高，執行的功能_static
		(containerY <= $window.scrollTop())? _fixed() : _static();

		function _fixed(){
			$header.css({
				'position': 'fixed',
				'top': 0,
				'left': 0
			});
			$headerAfter.css('marginTop', headerY);
		};

		function _static(){
			$header.css({
				'position': 'static',
				'top': '',
				'left': ''
			});
			$headerAfter.css('marginTop', 40);
		};
	};

	$window.on('load', initialize);

})(document, jQuery);

;(function (d, $) {

var $window = $(window),

$container = $('#headerTopicContainer'),

$header = $('#headerContainer'),

$headerAfter = $header.next(),

headerY = $header.height(),

containerY = $container.height();

function initialize(){

$window.on('scroll', scroll);

$window.trigger('scroll');

};

// 滾動時控制的函式

function scroll(){

// 當滾動的量小於containerY更高，執行_fixed功能

// 當滾動的量小於containerY更高，執行的功能_static

(containerY <= $window.scrollTop())? _fixed() : _static();

function _fixed(){

$header.css({

'position': 'fixed',

'top': 0,

'left': 0

});

$headerAfter.css('marginTop', headerY);

};

function _static(){

$header.css({

'position': 'static',

'top': '',

'left': ''

});

$headerAfter.css('marginTop', 40);

};

$window.on('load', initialize);

})(document, jQuery);

01-jQurry 分析與解析

01-1-變數宣告方式

JQuery跟Javascript的變數宣告方式一樣，一般來說變數宣告最基礎的方式有以下兩種…

var 變數名稱; //無參數變數宣告方式
var 變數名稱 = 變數值; //代參數變數宣告方式

1 2	var 變數名稱; //無參數變數宣告方式 var 變數名稱 = 變數值; //代參數變數宣告方式

另外也可以在一個敘述句中宣告多個變數或是多個帶變數值的變數，使用上彈性還蠻大的也可以減少要一直重複打 var 的麻煩

var a, b, c; //同一敘述宣告多個變數名稱
var a=1, b=2, c=3; //同一敘述宣告多個帶值的變數

1 2	var a, b, c; //同一敘述宣告多個變數名稱 var a=1, b=2, c=3; //同一敘述宣告多個帶值的變數

01-2-立即執行的匿名函式

(function (d, $) {
	var message = "ready方法是用以控制當dom準備好時所觸發的事件";
	$(document).ready(function(){
		alert(message);
	});
})(document, jQuery);

// 可省略document傳回值部份，jQuery直接控制的目標直接是document。
(function ($) {
	var message = "ready方法是用以控制當dom準備好時所觸發的事件";
	$(document).ready(function(){
		alert(message);
	});
})(jQuery);*/

(function (d, $) {

var message = "ready方法是用以控制當dom準備好時所觸發的事件";

$(document).ready(function(){

alert(message);

});

})(document, jQuery);

// 可省略document傳回值部份，jQuery直接控制的目標直接是document。

(function ($) {

var message = "ready方法是用以控制當dom準備好時所觸發的事件";

$(document).ready(function(){

alert(message);

});

})(jQuery);*/

01-3-jquery-trigger()

.trigger 反迴值針對 function _static() > $header(‘marginTop’, 值);

01-4-jQuery-scroll()方法

描述: 為 JavaScript 的 “scroll” 事件綁定一個處理函數，或者觸發元素上的該事件。當用戶滾動指定的元素時，會發生 scroll 事件。scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器窗口）。scroll() 方法觸發 scroll 事件，或規定當發生 scroll 事件時運行的函數。

資料來源：
http://www.w3school.com.cn/jquery/event_scroll.asp
http://www.css88.com/jqapi-1.9/scroll/

01-5-?: 條件選擇 a ? b : c – 比較與運算子

($('#headerTopicContainer').height() <= $(window).scrollTop()) ? _fixed() : _static();

01-6-jQuery-.next()方法

.next() 選下層元素

01-7-jQuery-.on()方法

定義和用法

on() 方法在被選元素及子元素上添加一個或多個事件處理程序
注意：使用 on() 方法添加的事件處理程序適用於當前及未來的元素（比如由腳本創建的新元素）。

語法 $(selector).on(event,childSelector,data,function,map)

event 必需。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效的事件。
childSelector 可選。規定只能添加到指定的子元素上的事件處理程序（且不是選擇器本身，比如已廢棄的 delegate() 方法）。
data 可選。規定傳遞到函數的額外數據。
function 可選。規定當事件發生時運行的函數。
map 規定事件映射 ({event:function, event:function, …})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

資料來源：http://www.runoob.com/jquery/event-on.html

02-以知問題與改善方法

02-1-Hander 圖片太大還網速慢會使得JS效果失效

在 #headerTopicContainer 內的圖片主要功能是要讓自適應圖片效果的高度 #headerTopicContainer 撐開，給 JS 取得高度的值後去計算 #headerContainer 在多少高度之後可以執行換 fixed (固定於上方區塊)，若在圖片沒有完整的載入完成的話是無法計算高度，因此在 #headerTopicContainer 加入 CSS min-hight:1。0vh;，JS 取得此高度的值後就可以順利執行了。

03-實做與演示

See the Pen jqeury-選單固定於瀏覽器上方 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

04-參考資料來源

進擊的IT-【JQuery】《第二回》JQuery變數宣告與型態及變數生命週期-變數宣告方式

相近似的功能
男丁格爾-[jQ]仿 Apple Store 的固定購物清單捲動效果 || 說明頁面、展示頁面
梅問題-jQuery教學－浮動式固定上選單 || 說明頁面、展示頁面

標籤雲

文章段落

jQeury-選單固定於瀏覽器上方

01-jQurry 分析與解析

01-1-變數宣告方式

01-2-立即執行的匿名函式

01-3-jquery-trigger()

01-4-jQuery-scroll()方法

01-5-?: 條件選擇 a ? b : c – 比較與運算子

01-6-jQuery-.next()方法

01-7-jQuery-.on()方法

02-以知問題與改善方法

02-1-Hander 圖片太大還網速慢會使得JS效果失效

03-實做與演示

04-參考資料來源

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

01-jQurry 分析與解析

01-1-變數宣告方式

01-2-立即執行的匿名函式

01-3-jquery-trigger()

01-4-jQuery-scroll()方法

01-5-?: 條件選擇 a ? b : c – 比較與運算子

01-6-jQuery-.next()方法

01-7-jQuery-.on()方法

02-以知問題與改善方法

02-1-Hander 圖片太大還網速慢會使得JS效果失效

03-實做與演示

04-參考資料來源

文章段落