繁体   English   中英

修复了从外部页面滚动到锚点时的标题问题

[英]Fixed Header Issue When Scrolling To Anchor From External Page

最近,我为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 )并单击导航中的链接时,它都可以使您直接转到首页上的适当锚点,但不会考虑到固定标题的高度,标题会被部分遮盖。

任何帮助将不胜感激。

谢谢!

我要做的是在页面加载中,检测哈希(如果有),如果存在,然后运行相同的动画代码进行操作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM