Question

我正在使用带有引导程序4的固定导航栏。使用fixed-top导航栏时，导航栏将隐藏其下方的内容，因为其位置是固定的。我必须在正文上使用padding-top: 65px;，以使内容显示在导航栏下方。

我有内部链接，因此单击导航栏锚点将页面相对于该部分放置在该部分上。但是，由于我使用了padding-top技巧，因此该位置位于该部分顶部下方65px。有没有一种方法可以解决该问题，使排名回到该部分的顶部？

Answer 1

您不应该在第一个“固定导航”类中添加。您可以在jquery的滚动事件中添加它。

$(window).on('scroll', function () {

var scrollTop = 20;
    if ($(window).scrollTop() >= scrollTop) {
        $('nav').addClass("fixed-nav");

    }
    if ($(window).scrollTop() < scrollTop) {
        $('nav').removeClass('fixed-nav');

    }
});

这会在用户向您的网站中向下滚动时添加固定导航。

Answer 2

单击链接时，将正文的填充顶部设置为0，并在相对于内联链接的部分上的页面位置之后的哈希更改事件中，将填充设置为65。

$('.nav-link').click(function () {
        $('body').css('padding-top', '0');
});


window.onhashchange = function () {
    $('body').css('padding-top', '65px');
};

Answer 3

$(document).ready(function() {
    var top_pad = $('.your_headerelem').height();
    $('.first-emem-after-header').css({'padding-top':+top_pad+'px'});

    $(window).resize(function(){
        var top_pad = $('.your_headerelem').height();
        $('.first-emem-after-header').css({'padding-top':top_pad+'px'});
   }) ;
}) ;

这将使标题之后的第一个元素位于标题下方。

使用固定导航栏时页面导航位置的更正

3 个答案: