Question

我正在构建我的投资组合页面，但是有问题。当我单击较小设备中的导航链接时，它会向下滚动，因为它包含标签和折叠的导航栏菜单，并且与每个部分的标题重叠。

我尝试了下面的代码，但是它重叠了我的标题或小像素

$('.navbar-nav .nav-link').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

那么有什么解决办法吗？就像当我单击导航链接时，它会滚动，然后它会向上滚动一点px？

Answer 1

您也可以这样做，也可以更改较小分辨率的像素，我认为 576 px

$('.navbar-nav .nav-link').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

$('.nav-link').click(function (){    
    if ($(window).width() < 576){
        var hash = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(hash).offset().top - 150
        }, 100);
    }
});

因此，当您单击导航链接时，它会滚动上一点px

导航栏折叠小屏幕上的内容重叠

1 个答案: