我想这样做,当用户下到页面时,导航栏位置是固定的。我改变位置jquery或css但问题是。
当用户下到页面时:
我想修复页面顶部。谢谢你的帮助。
nav css: `
img#logo {width:auto;height:72px; position:absolute;margin-left:90px; }
div#nav {width:1930px;height:72px;border:2px solid #333;}
div#nav ul { list-style-type:none; }
div#nav ul li {float:left;}
div#nav ul#menu1 li a {font:20px Arial, Helvetica, sans-serif; padding:160px; color:#333;line-height:72px;}
div#nav ul#menu2 li a {font:20px Arial, Helvetica, sans-serif;padding:160px;margin-left:160px; color:#333; line-height:72px;}`
jquery:
$(window).scroll(function(e)
{
var location = $(window).scrollTop();
if(location>=$('div#nav').offset().top)
{
$('div#nav').css({'position':'fixed'});
}
});
答案 0 :(得分:1)
我喜欢将https://fixedposition.googlecode.com/files/jquery.fixedposition.1.0.0-min.js用于此目的,因为这很简单。
首先在您网站的标题中包含.js文件,然后使用以下代码:
word_list
接下来,继续将 <script>
$(document).scroll(function(){
if( !$('.navbar').length ) return;
if (!$('.navbar').attr('data-top')) {
// If already fixed, then do nothing
if ($('.navbar').hasClass('navbar-fixed')) return;
// Remember top position
var offset = $('.navbar').offset();
$('.navbar').attr('data-top', offset.top);
}
if ($('.navbar').attr('data-top') <= $(this).scrollTop()) {
$('body').addClass('subnav-active');
$('.navbar').addClass('navbar-fixed');
$('#navbarStyleHolder').css("display", "block");
}
else {
$('body').removeClass('subnav-active');
$('.navbar').removeClass('navbar-fixed');
$('#navbarStyleHoler').css("display", "none");
}
});
</script>
替换为导航所在的div,然后创建一个.navbar
类,其中包含固定标头应具有的格式(在我的示例代码中称为{{ 1}})。
当到达.css
div的末尾时,此脚本会自动将.navbar-fixed
类替换为.navbar
类。
例如,如果您想将其置于屏幕顶部,请使用此css代码:
.navbar-fixed