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

【问题标题】：Correcting in page navigation position when using fixed navbar使用固定导航栏时更正页面导航位置
【发布时间】：2019-02-21 05:31:16
【问题描述】：

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

我有内部链接，因此单击导航栏锚点会将页面定位在与其相关的部分上。但是，因为我使用了padding-top 技巧，所以该位置在该部分顶部下方 65px 处。有没有办法解决，让位置回到section顶部？

【问题讨论】：

既然你想要粘性导航栏，它会充当固定的 div，所以你必须给那个 div 赋予 padding-top。您也可以使用 jquery 动态提供该 padding-top，如果您想通过 jquery 完成它，请告诉我。
请添加您的代码
@KunalKhatri 我不介意解决这是 jquery

标签： html css twitter-bootstrap

【解决方案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');

    }
});

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

【讨论】：

使用此代码，这会突然使导航栏变得粘滞，因此无法滚动到，内容将位于导航栏后面。
如果不想突然就加transition: 0.2s all;此代码在滚动中工作，实际上在滚动后在粘性导航中工作是的，内容将位于导航栏后面。为了获得良好的视图使用背景：rgba(255, 255, 255, 0.9);透明背景。喜欢abron.co
@HamidNaghipour 在我的情况下，导航栏作为页面的第一个元素位于顶部，这就是为什么我将其默认设置为固定并希望它保持固定。您提供的解决方案并没有解决我提到的问题，也没有解决它在 abron.co 上的工作方式。当您单击导航链接时，请查看 abron.co，页面如何滚动到相关部分顶部下方的位置，而不是部分顶部。我想要的是让它滚动到该部分的顶部。

【解决方案2】：

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

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


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

【讨论】：

【解决方案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'});
   }) ;
}) ;

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

【讨论】：

你正在给我解决方案来修复导航栏，我已经在工作了。我的问题是单击其中一个导航链接后定位页面。当我现在单击导航链接时，页面会滚动到相关部分，但还会滚动：导航栏的高度（顶部 + 65 像素，因为导航栏高度为 65 像素）。我希望它只滚动到该部分的顶部。