【发布时间】:2013-12-30 02:51:36
【问题描述】:
我最近为 http://c42d.com 重新设计了一个模板,这是我正在为一家名为 C42D 的公司构建的投资组合网站。我的问题涉及导航系统的滚动功能。
它在主页上正常工作。当您单击顶部导航中的任何链接时,它会完美地滚动到页面上的该部分,并且会考虑固定标题的高度。以下 Javascript 负责此功能:
/** Hash Scroll */
/** Portfolio Filter */
$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {
if(!$( this ).attr( 'href' ).match(/^#/)) return;
e.preventDefault();
var elmHash = $( this ).attr( 'href' );
var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
var windowOffsetTop = Math.ceil( $(window).scrollTop() );
if( elmOffsetTop != 0 ) {
elmOffsetTop = elmOffsetTop - 84;
if( windowOffsetTop == 0 ) {
elmOffsetTop = elmOffsetTop - 0;
}
}
//console.log( $( this ).attr( 'href' ) );
$( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );
});
不幸的是,当您导航到网站上的任何内部页面(例如http://c42d.com/termsandconditions)并单击导航中的链接时,它会将您带到主页上正确的锚点,但没有考虑到固定标题的高度,标题部分被遮挡。
任何帮助将不胜感激。
谢谢! 赞
【问题讨论】:
-
链接不会触发任何 javascript,因此无法运行任何计算顶部导航高度的代码。
标签: javascript jquery html css