滚动到平板电脑和手机的位置条件

Question

我有以下第一部分工作完美，它滚动到顶部（允许固定导航）并在距页面顶部 155 像素处停止。然而，当我们使用平板电脑时，header 深度下降到 75px，然后在移动设备上下降到 65px。

有没有办法根据导航栏的 css 高度有条件地滚动到不同的位置？注释掉的部分是我一直在玩的。

$('a[href^="#"]').on('click', function(event) {

            var target = $( $(this).attr('href') );

            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: (target.offset().top)-155
                }, 1000);
            }

            // else if ( $(".dl-menuwrapper button").css("height") === "65px") {
            //     $('html, body').animate({
            //         scrollTop: (target.offset().top)-75
            //     }, 1000);
            // }

        });

任何人有任何想法，以便我可以为平板电脑和移动设备增加两个高度？

Answer 1

我会将导航栏的高度作为变量获取，这样使用什么设备都没有关系。

$('a[href^="#"]').on('click', function(event) {
        var target = $( $(this).attr('href') ),
            navBarHeight = $(".nav").height();

        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: (target.offset().top) - navBarHeight
            }, 1000);
        }

    });

显然，更改 $(".nav") 以根据您的目的使用正确的选择器。您还可以通过向 navBarHeight.

添加常量来添加偏移量

滚动到平板电脑和手机的位置条件

Scroll to position conditional for tablet and mobile

jquery

jquery-animate

target

scrolltop