如何制作粘性顶部导航栏

时间：2015-04-13 10:27:52

标签： javascript jquery html css

我想制作一个导航栏，就像在W3School中一样。

当我们向下滚动时，导航栏与标题重叠，当我滚动到顶部时，标题位于导航栏上方。

我试过但我不能把那件事做成我想要的东西。

2 个答案:

答案 0 :(得分：1)

我已经用CSS类完成了它，只需要一点JS来触发类。

背后的想法是检查元素的偏移量和当前视图的滚动。

CodePen示例：http://codepen.io/giacomofurlan/pen/hcfkE

扩展说明：http://giacomofurlan.name/my-experiments/how-to-fix-the-navigation-bar-to-the-top-when-it-reaches-the-position

这是线索部分，JS控制器（nav#menu是我们的粘性菜单）：

(function ($) {
    "use strict";

    var menuPosition = function () {
        var nav = $("nav#menu"),
            height = nav.height(),
            windowHeight = $(window).height();

        if ($(window).scrollTop() > (windowHeight - height)) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }
    };

    menuPosition();
    $(document).scroll(menuPosition);
}(jQuery));

这是CSS类：

.fixed {
    position: fixed;
    top: 0px;
}

答案 1 :(得分：1)

这是你想要的吗？如果是这样，那么你可以在jQuery的帮助下做到这一点。 在发布任何内容之前谷歌都有很多教程。

$(document).ready(function() 
{
	window.holdOffset = $('#sticky_navigation').offset().top;
	$(window).scroll(function() 
	{
		 sticky_navigation();
	});	
});

function sticky_navigation()
{
	var scroll_top = $(window).scrollTop(); 
	if (scroll_top > holdOffset)  
		$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 }); 
	else 
		$('#sticky_navigation').css({ 'position': 'relative' });    
};
body
{
	margin:0px;
}

p
{
	margin-left:100px;
	margin-right:100px;
}

#my_logo 
{
	font-size:80px;
}


#sticky_navigation_wrapper 
{
	width:100%;
	height:50px; 
}

#sticky_navigation 
{
	width:100%; 
	height:50px; 
	background:black; 
}

#sticky_navigation ul 
{
	list-style:none; 
	margin:0; 
	padding:5px; 
}


#sticky_navigation ul li a 
{
	display:block; 
	float:left; 
	margin:0 0 0 5px; 
	padding:0 20px; 
	height:40px; 
	font-size:24px; 
	color:#ddd; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>

<link href="demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sticky-navigation.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


</head>
<body>

<div id="demo_top_wrapper">

	<div id="demo_top">
		<div class="demo_container">
			<div id="my_logo">Site Logo</div>
		</div>
	</div>

	<div id="sticky_navigation_wrapper">
		<div id="sticky_navigation">
			<div class="demo_container">
				<ul>
					<li><a href="#" class="selected">Link #1</a></li>
					<li><a href="#">Link #2</a></li>
					<li><a href="#">Link #3</a></li>
				</ul>
			</div>
		</div>
	</div>

	
</div>

<section id="main">

	<div id="content">
		
		<p><strong>Scroll down to see this navigation menu sticking to the top of the page.</strong></p>
		
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada convallis mauris in rutrum. Suspendisse dolor lorem, consequat sit amet rutrum at, cursus ut felis. Aliquam pellentesque sodales enim. Vivamus sed adipiscing arcu. Duis tincidunt iaculis lobortis. Sed laoreet mollis tempus. Nam cursus magna in mauris pellentesque vestibulum. Ut non risus a enim pellentesque tincidunt. Maecenas vulputate dolor eu sem convallis convallis. Nulla viverra pharetra tortor, eu adipiscing risus imperdiet a. Nam eu nibh vitae diam accumsan tempus vel eget nisl. Quisque et urna lacus, a mollis ipsum.
		</p>
		<p>
		Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
		</p>
		<p>
		Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
		</p>

		<p>
		Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus. 
		</p>

		<p>
		Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
		</p>
		<p>
		Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
		</p>

		<p>
		Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus. 
		</p>
		<p>
		Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
		</p>

		<p>
		Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus. 
		</p>
		
	</div>
	
</section>

<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

相关问题
最新问题