Question

我已经在我的网站上添加了一些简单的动画滚动，但是在jQuery中有一点点怪癖。每当网站的窗口顶部位于网站顶部的静态slideDown()导航栏下时，我.nav-fixed .nav导航栏。一切都很好，除了当你点击任何链接（我假设任何链接与jQuery onClick动画滚动功能）时，.nav-fixed会暂时隐藏并在网站滚动后再次显示。只要顶部静态Should hide the nav位于窗口视图中，我就会在控制台中记录消息.nav，并注意到即使我们在页面底部并点击任何onclick网站上的jquery功能链接消息被记录一次，就像静态导航在窗口视图中一样。

有没有人有任何想法如何解决？这是上面提到的网站：http://www.mmsmsy.com 这是代码：

const addClickToNav = (element) => {
  $(window.opera ? 'html' : 'html, body').animate({scrollTop: $(element).offset().top - 50}, 1000);
}

$('.nav-link-top').on('click', () => $(window.opera ? 'html' : 'html, body').animate({scrollTop: 0}, 1000));
$('.link-start').on('click', () => addClickToNav('.about'));
$('.nav-link-skills').on('click', () => addClickToNav('.skills'));
$('.nav-link-portfolio').on('click', () => addClickToNav('.portfolio'));
$('.nav-link-contact').on('click', () => addClickToNav('.contact'));

$(window).scroll(function() {
    if ($(this).scrollTop() > $('.nav').offset().top + $('.nav').height() + 50 && $('.nav-fixed').css('display') == 'none') {
      $('.nav-fixed')
        .css('display', 'flex')
        .hide()
        .slideDown();
    }
    if ($(this).scrollTop() < $('.nav').offset().top + $('.nav').height() + 50) {
        console.log("Should hide the nav");
        $('.nav-fixed').slideUp();
    }
});

Answer 1

你尝试过这样做：

$(window).scroll(function() {
    if ($(this).scrollTop() > $('.nav').offset().top + $('.nav').height() + 50 && $('.nav-fixed').css('display') == 'none') {
      $('.nav-fixed')
        .css('display', 'flex')
        .hide()
        .slideDown();
    }
    else if ($(this).scrollTop() < $('.nav').offset().top + $('.nav').height() + 50) 
    {
        console.log("Should hide the nav");
        $('.nav-fixed').slideUp();
    }
});

OnClick使scrollTop暂时等于零

1 个答案: