javascript - jQuery 偏移顶部导航栏

Question

我有平滑滚动的代码:

$(window).scroll(function() {
    if ($(".nav").offset().top > 150) {
        $(".nav-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".nav-fixed-top").removeClass("top-nav-collapse");
    }
});


$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

但是滚动后该部分的标题被隐藏我需要将它移动大约 100px 顶部？我尝试过:

scrollTop: $($anchor.attr('href')).offset().top-100

或

scrollTop: $($anchor.attr('href')).offset({top: -100}).top

但这不能正常工作:/

Answer 1

您需要将 100 添加到顶部偏移量，因为它是 0

nav-fixed {
    position:fixed;
    top:0;
} 

试试这个:

$('html, body').stop().animate({
    scrollTop: $(".nav").offset().top + 100
}, 1500, 'easeInOutExpo');

您可以使用

检查变量的值

console.log($($anchor.attr('href')).offset().top);

编码愉快!