OnClick使scrollTop暂时等于零

时间:2017-06-17 17:48:56

标签: javascript jquery scroll navigation fixed

我已经在我的网站上添加了一些简单的动画滚动,但是在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();
    }
});

1 个答案:

答案 0 :(得分:0)

你尝试过这样做:

$(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();
    }
});