在做一些更改UI的一个网站,我们必须实现一个修复标头,仍然是修复上的屏幕滚动时。Facebook有一个类似的标头,仍在顶级的内容。
现在,有许多jQuery插件的可用!但在我们的情况中我们不允许添加任何新插件的技术堆栈的应用程序(我知道很糟糕:-()。所以这是一个小JQuery基础方案,以使一个DIV的头固定在屏幕上方的滚动时。
HTML
下面是HTML代码。它包含一个简单的div＃header中，我们要冻结在上面。请注意，我们已包括JQuery的从jquery.com网站直接（在我的应用程序，包括从旧版本的jQuery出高科技栈）。
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<title>Scroll Fixed Header like Facebook in JQuery - viralpatel.net</title>
</HEAD>
<BODY>
<div id="header">
<h1>Scroll Fix Header like Facebook in JQuery</h1>
</div>
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
</BODY>
</HTML>
在上面的HTML，我们增加了几行“一些愚蠢的文本添加...”只是为了让页面滚动。
<SCRIPT>
$(document).ready(function() {
var div = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>
我们已经添加了一个事件监听器“ 滚动 “事件。这在浏览器发射每次滚动事件处理函数被调用。
现在，我们选择的头元素（在上面的代码高亮显示），只是做一些位置的东西。我们头div的位置，固定静态取决于滚动位置的状态。也是顶级的属性设置为0px的情况下，我们要修复，当页面向下滚动。
站长行业门户(www.software8.co)文章，希望大家可以留言建议