大家好,我想在我的页面顶部有一个 float 的顶部栏,即使我向下滚动页面也能看到它。我尝试使用以下代码来实现此目的,但由于某种原因它不起作用!在尝试排除故障后,我注意到 $(document).ready(function() 永远不会变成真的!你们能帮我看看这里出了什么问题吗?
float 顶栏:
<div class="FlyingTopBar">
<div class="GlobalNav">
<div class="Content">
<span class="Line"></span>
<a class="Active" href="/" title="Home">Home</a>
<span class="Line"></span>
<a href="/link1.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link2.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link3.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link4.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link5.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link6.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link7.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link8.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link9.html" title="Link">Link</a>
<span class="Line"></span>
<a href="/link10.html" title="Link">Link</a>
<span class="Line"></span>
<div class="BottomFix"></div>
</div>
</div>
</div>
javascript 在向下滚动时将 float tobar 保持在顶部:
<script type="text/javascript">
/*<![CDATA[*/
alert('start');
var $flying_bar = $('div.FlyingTopBar');
var amount_scrolled;
var initial_top_position =0;
var actual_top_position;
$(document).ready(function() {
updateCurrentPosition();
alert('visable topbar1');
$flying_bar.css('visibility','visible');
alert('visable topbar2');
$(window).bind('scroll', updateCurrentPosition);
})
function updateCurrentPosition() {
amount_scrolled = $window.scrollTop();
if (amount_scrolled < 0) amount_scrolled = 0; //not tested iPad reversed scroll fix
if (amount_scrolled < initial_top_position) {
actual_top_position = initial_top_position - amount_scrolled;
$flying_bar.css({'top':actual_top_position + 'px'});
} else {
$flying_bar.css({'top':'0px'});
}
}
headerTickerInit('div.ReportTitleTicker');
if( $('#ScrollPollSection').length > 0 ) {
$('#SideNavPolls').show(0);
}
/*]]>*/
</script>
部分CSS:
.FlyingTopBar {z-index:20; position:fixed; top:120px; left:0px; width:100%; visibility:hidden;} /* <- top updated by JS */
最佳答案
将它添加到 FlyingTopBar 类,在这种情况下真的不需要使用 JavaScript :-
. FlyingTopBar { position : fixed; top: 0px; width:100%; z-index:20; }
要了解有关固定定位的更多信息,请浏览:http://www.w3schools.com/cssref/pr_class_position.asp
希望对您有所帮助。 :-) 干杯!
关于javascript - 向下滚动页面时如何保持 float 顶部栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15608577/