[英]How to make navigation menu stay at the top of the page while scrolling only?
I have created a navigation menu with ul > li
. 我用
ul > li
创建了一个导航菜单。
The menu is actually at the center of the page. 菜单实际上位于页面的中心。
What I want is, only while scrolling, my menu stays at the top of the page. 我想要的是,只有在滚动时,我的菜单才会停留在页面顶部。
I can do it using css 我可以使用CSS来做
.menu {
position:fixed;
top:0;
float:left;
}
.menu li {
float:left;
padding:10px;
margin:2px;
}
But actually I need when I scroll only. 但是实际上我只在滚动时需要。 Can any one suggest some solution :)
任何人都可以提出一些解决方案:)
Try this:- 尝试这个:-
<script>
$(document).ready(function(){
// hide targeted element first
$("#xg_navigation").hide();
// fade back in targeted element
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#xg_navigation').fadeIn();
} else {
$('#xg_navigation').fadeOut();
}
});
});
});
</script>
You can do something like this: 您可以执行以下操作:
$(window).scroll(function() {
if ($(document).scrollTop() > 100)
{
$('.menu').addClass('fixed');
}
});
css: CSS:
.fixed{position:fixed;} .fixed {位置是:固定;}
remember to remove class fixed form .menu when user scrolls back to top of the page. 请记住,当用户滚动回到页面顶部时,删除类固定形式的.menu。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.