[英]Navigation menu fade in on scroll
I'm designing a website and I'd like the navigation menu to fade in once I scroll down >50px. 我正在设计一个网站,当我向下滚动> 50px时,希望导航菜单消失。 I'm using the following JavaScript with JQuery library: 我在JQuery库中使用以下JavaScript:
(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(500);
} else {
$('.menu').fadeOut(500);
}
});
});
})(jQuery);
The class .menu
is set on {display: none;}
. .menu
类在{display: none;}
。
This should work 这应该工作
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('nav').fadeIn(500);
}
else {
$('nav').fadeOut(500);
}
});
});
Try this: 尝试这个:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(1000);
} else {
$('.menu').fadeOut(1000);
}
});
});
Just corrected your code! 刚刚更正了您的代码! It works fine! 工作正常!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.