Home » 网页开发教学 » JavaScript教学 » 五分钟内搞定jQuery Fixed定位的导航Header!

五分钟内搞定jQuery Fixed定位的导航Header!

五分钟内搞定jQuery Fixed定位的导航Header!

相信大多数的你们都已经看过很多网站都使用了Fixed定位的导航Header,那就是不管你是往下卷动还是往上卷动,网页的Header会永远固定在页面的最上方,就像时本站的Header一样。 还是不明白?没关系,看看以下的例子。

查看例子

今天本文就会向各位解说怎么在五分钟内搞定jQuery Fixed定位的导航Header!

HTML的构造

以下就是今天我们必须使用的HTML构造:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: jQuery Sticky Header On Scroll | onlyWebPro.com</title>
</head>
<body>
<div id="demo_wrapper">
  <div id="logo">
    <h1>Make Money</h1>
  </div>
  <!-- END logo -->
  <div id="stickyribbon">
    <ul>
      <li><a href="http://www.investopedia.com/investing/investing-basics/" target="_blank">Investing-Basics</a></li>
      <li><a href="http://www.investopedia.com/investing/bonds-and-fixed-income/" target="_blank">Bonds &amp; Fixed Income</a></li>
      <li><a href="http://www.investopedia.com/forex/" target="_blank">Forex</a></li>
      <li><a href="http://www.investopedia.com/investing/fundamental-analysis/" target="_blank">Fundamental Analysis</a></li>
    </ul>
  </div>
  <div id="page_content">
    <p>This is a demo page of "<a href="http://www.onlywebpro.com/2013/03/04/make-a-jquery-sticky-header-in-5-minutes/" title="Learn to develop jQuery Sticky Header">Make A jQuery Sticky Header In 5 Minutes</a>" post. If you want to find out more about making jQuery Sticky Header, pleae log on to <a href="http://www.onlywebpro.com" title="Web Development Tutorial Website">onlyWebPro.com</a>.</p>
    <h2>Introduction To Growth Investing</h2>
    <p>People have many different styles and tastes when it comes to money, but making your money grow is typically considered the most fundamental investment objective. The best way to accomplish this goal will vary according to factors such as the investor's risk tolerance and time horizon. But there are some principles and techniques that are applicable for many different types of investors and growth strategies. </p>
    <p><img src="money.jpg"  width="860" height="600" alt="wall street - New York Stock Exchange" /><br />
      <em>Image courtesy of Kadellar (Wikipedia.com)</em></p>
    <h3>Types of Growth Investments</h3>
    <p><em><strong>Small-Cap Stocks</strong></em><br />
      The size of a company is based on its market capitalization, or net worth. There is no exact, universal definition of what is considered to be "small cap" compared to micro, mid or large cap, but most analysts classify any company with a capitalization of between $300 million and $2 billion as a small-cap firm. Companies in this category are often still in their initial phase of growth and their stocks have the potential for substantial appreciation in price. Small-cap stocks have historically posted higher returns than their blue-chip cousins, but they are also considerably more volatile and carry a higher degree of risk. Small-cap stocks have also often outperformed large-cap stocks during periods of recovery from recessions.</p>
    <p><em><strong>Technology and Healthcare Stocks</strong></em><br />
      Companies that develop new technologies or offer innovations in healthcare can be excellent choices for investors who are looking for a home-run play in their portfolios. The stocks of companies that develop popular or revolutionary products can rise exponentially in price in a relatively short period of time. For example, the price of Pfizer was just under $5 a share in 1994 before Viagra was released. This blockbuster drug took the company's stock price to above $30 a share over the next five years, thanks to FDA approval of the drug in 1998.</p>
    <p><em><strong>Speculative Investments</strong></em><br />
      Thrill seekers and speculators look to high-risk growth instruments such as penny stocks, futures and options contracts, foreign currency and speculative real estate such as undeveloped land. There are also oil and gas drilling partnerships and private equity for aggressive investors in high income brackets. Those who pick the right choices in this arena can see a return on capital of many times their initial investment, but they can also often lose every cent of their principal.</p>
    <h3>The Bottom Line</h3>
    <p>Growth investing is a complex subject that is often closely coupled with other subjects such as fundamental analysis, technical analysis and market research. There are many more growth strategies used by individual and institutional investors, and a complete listing of them is far beyond the scope of this article. For more information on growth strategies for your investments, consult your broker or financial advisor. </p>
    <hr />
    <p>Notes: Contents are retreives from <a href="http://www.investopedia.com" target="_blank">Investopedia.com</a> for demostration purpose only.</p>
  </div>
</div>
<!-- END demo_wrapper -->
</body>
</html>

正如你可以从以上的HTML结构观察到我们有一个名为”demo_wrapper”的主容器。而在其内部,我们却有”logo”,”stickyribbon”和”page_content”的div。而”stickyribbon”的div是本教程中的重点内容,我们将在稍后添加一些JavaScript,使它能够Fixed定位在网页的最上方。

添加CSS Styles

<style type="text/css">
body {
	background: #E8E9E4;
	font-family: Arial,sans-serif;
	padding: 20px 0;
}

h1 {
	color: #28639c;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: -6px;
    margin: 0;	
}

h2 {
	border-bottom: 1px solid #ddd;
	color: #28639C;
	font-size: 24px;
	font-weight: bold;
}

p {
	margin: 0 0 25px;	
}

a {
	color: #28639C;
}

#demo_wrapper {
	background: #fff;
	-moz-box-shadow:    0 0 8px 0 rgba(0, 0, 0, 0.1);
  	-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  	box-shadow:         0 0 8px 0 rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	width: 960px;	
}

#logo {
	padding: 40px 50px 30px;	
}

#stickyribbon {
	background: url(ribbon_corner.png) no-repeat center bottom;
	color: #fff;
	height: 60px;
	margin-left: -20px;
	width: 1000px;
}

#stickyribbon ul {
	list-style-type: none;
	margin: 0 10px;
	padding: 10px 40px 15px;
	-moz-box-shadow:    0 12px 5px -6px rgba(0, 0, 0, 0.5);
  	-webkit-box-shadow: 0 12px 5px -6px rgba(0, 0, 0, 0.5);
  	box-shadow:         0 12px 5px -6px rgba(0, 0, 0, 0.5);
}

#stickyribbon ul li {
	display: inline;
	font-size: 16px;
	font-weight: bold;
	margin: 0 20px;
}

#stickyribbon ul li a {
	color: #fff;
	text-decoration: none;
}

#stickyribbon ul li a:hover {
	color: #c9e0f7;	
}

#page_content {
	padding: 30px 50px;	
}
</style>

有了HTML构造后,是时候添加CSS打造一个漂亮的Header。我不打算一一解说以上的每一个CSS Styles,而我只会专注于解说其中两个重点CSS,那就是”#demo_wrapper”与”#stickyribbon”。如你所观察到的#demo_wrapper与#stickyribbon的宽度稍有不同,是因为我们要让#stickyribbon能够看起来像是包裹着#demo_wrapper的错觉。

以下是我们所使用的导航Header的图像:
Sticky Ribbon

添加JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var stickyRibbonTop = $('#stickyribbon').offset().top;
	 
	$(window).scroll(function(){
		if( $(window).scrollTop() > stickyRibbonTop ) {
			$('#stickyribbon').css({position: 'fixed', top: '0px'});
		} else {
			$('#stickyribbon').css({position: 'static', top: '0px'});
		}
	});
});
</script>

万事俱备,只欠东风!首先我们先从谷歌CDN(内容分发网络)载入jQuery。
接着,我们就创建一个variable来记录”stickyribbon”的offsetTop参数,然后呢,就在每一次当网页滚动时开始检查window.scrollTop是否有超过stickyheader的offsetTop。 如果是的话,我们只需设置stickyheader的CSS position:fixed和top:0px。相反的,如果window.scrollTop是低于stickyheader的offsetTop的话,我们就将stickyheader转换回其原来的位置position:static和top:0px。

大功告成!

查看例子

结束语

我们只需区区的五分钟便能轻易的创建出jQuery Fixed定位的导航Header!


Android, iOS Development Tutorials