Question

我有一个简单的菜单，在单击菜单项时会滚动到某个部分。

例如：

<li><a href="#contact" class="menu_item">Contact</a></li>

将滚动到：

<section id="contact"></section>

然而，我还有一个总是粘在顶部的菜单，并且该菜单的高度不是用滚动脚本计算的。所以菜单总是悬停在元素的顶部，使其中的一部分不可读。

如何更改它以使其不直接滚动到该元素，但是让它说高于80px？并且仅适用于一个元素，因为我的页面上只有一个部分出现此问题。

我正在使用此滚动到元素脚本：

/* Scroll to Main Menu
        ================================================== */
        $('#navigation a[href*=#]').click( function(event) {
            var $this = $(this);
            var offset = -80;
            if($this.parent().is(':nth-child(2)')) {
                offset = 2; // for second child dont do offset
            };
            $.scrollTo( $this.attr('href') , 650, { easing: 'swing' , offset: offset , 'axis':'y' } );
            event.preventDefault();
        });

        /* Scroll to Element on Page
        ================================================== */
        $('a#to-blog').click( function(event) {
            event.preventDefault();
            $.scrollTo( $('#blog') , 1250, {  offset: 1 , 'axis':'y' } );
        });

         $('.hero-btn').click( function(event) {
            var $this = $(this);
            var offset = -80;
            if($this.attr('href') == '#about-us' || $('.nomenu').is(':visible')) {
                offset = 0; // for first section dont do offset
            };
            $.scrollTo( $this.attr('href') , 650, { easing: 'swing' , offset: offset , 'axis':'y' } );
            event.preventDefault();
        });

        /* Add active class for each nav depending on scroll
        ================================================== */
        $('section').each(function() {
            $(this).waypoint( function( direction ) {
                if( direction === 'down' ) {
                    var containerID = $(this).attr('id');
                    /* update navigation */
                    $('#navigation a').removeClass('active');
                    $('#navigation a[href*=#'+containerID+']').addClass('active');
                }
            } , { offset: '80px' } );

            $(this).waypoint( function( direction ) {
                if( direction === 'up' ) {
                    var containerID = $(this).attr('id');
                    /* update navigation */
                    $('#navigation a').removeClass('active');
                    $('#navigation a[href*=#'+containerID+']').addClass('active');
                }          
            } , { offset: function() { return -$(this).height() - 80; } });
        });

Answer 1

我相信您需要将各个地方的偏移量更改为您想要的值：

var offset = -80;

较少的数字将进一步＆＃34; up＆＃34;页面，更高的数字将进一步＆＃34;向下＆＃34;页面。

是否可以滚动到元素上方/下方滚动到元素

1 个答案: