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