首先,我很抱歉这是一个开放性的问题。
我知道要使网页的标题静态化,因此它始终在视口(viewport)的顶部可见,并且当您向下滚动时,内容会在其下方传递。这完全可以使用css来实现。
我想知道如何实现让标题从页面上滚动但在顶部保持水平的菜单栏不变。 http://www.forexfactory.com是一个很好的例子。
我看到它调用了JavaScript函数onHeaderComplete.execute()
,我认为当标题滚动时,它会在导航栏上应用额外的CSS样式,但我不确定它的工作方式。由于我的JavaScript技能而受到赞赏的任何基本解释都相对有限。
最佳答案
我刚刚回答了类似的问题。 CHECK THIS QUESTION
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
DEMO
关于javascript - 一旦标题已滚动过去,请修复页面顶部的菜单栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14499024/