我目前正试图让sticky.js在我的网页上工作...在导航栏上 - 不幸的是它不起作用！我尝试了两种不同的插件，但似乎都不起作用！
对于那些不知道的人来说，插件背后的想法是，当你向下滚动时，它应该让某个html元素“卡住”屏幕...我受到了codeanywhere.com导航的启发菜单，想要做类似的事情！
有人会介意查看我的website page并排查我的current (Same as sticky.js link from above)粘贴插件无效的原因吗？
对于javascript，我绝对是新手。非常感谢任何帮助。
答案 0 :(得分：3)
尝试以下代码......
的变化：
1）头部中包含Jquery CDN
2）包括修改后的样式（根据您的要求改变）
3）最后修改了javascript。
<!DOCTYPE html>
<html>
<head>
<title>Home ~ Pixel Crescent</title>
<base href="http://pixelcrescent.com/" />
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="assets/templates/css/kube.css" rel="stylesheet">
<link href="assets/templates/css/styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.stick-nav-left {
position:fixed;
top:0px;
z-index:99;
}
.stick-nav-right {
position:fixed;
top:0px;
right:0px;
z-index:99;
}
</style>
</head>
<body>
<div style="background: white;">
<div class="units-row wide-pic">
<div class="units-row">
<div id="header" class="unit-80 unit-centered">
<nav class="navbar navbar-left" id="navbar-left">
<ul>
<li><a class="btn-space" href="http://pixelcrescent.com">Home</a></li>
<li><a class="btn-space" href="http://pixelcrescent.com/products">Products</a></li>
<li><a class="btn-space" href="http://pixelcrescent.com/docs">Documentation</a></li>
</ul>
</nav>
<nav class="navbar navbar-right" id="navbar-right">
<ul>
<li><a class="btn-space" href="#">Sign up</a></li>
<li><a class="btn btn-blue" href="#">Sign in</a></li>
</ul>
</nav>
</div>
</div>
<div class="units-row" style="margin-top: 150px">
<div class="unit-60 unit-centered" id="logotext">
<h1>
Pixel Crescent
</h1>
</div>
</div>
</div>
<div style="text-align: center;" class="units-row upper-shadow">
<div class="unit-centered unit-90">
<hgroup>
<h1>
Home
</h1>
<h1 class="subheading">
Make an Impact.
</h1>
</hgroup>
<p class="lead">
All of our products are developed with usability and satisfaction in mind. Don't settle for substandard work; build satisfaction, gain loyalty, and increase communication with your customers through our services.
</p>
</div>
</div>
<div class="units-row end">
<div class="unit-90 unit-centered">
<h1>High Quality products at low budget prices</h1>
<p>Are you looking for ways to cut down on development time, increase productivity and keep your clients happy?<br />
We've got you covered!</p>
<div class="units-row">
<div class="unit-33 shadow-box">
<hgroup>
<h2>
Aligned
</h2>
<h2 class="subheading">
"Under Construction" Page
</h2>
</hgroup>
<p>
<b>Features</b><br>
No-database 'Email Subscribe' form<br>
Logo<br>
Responsive<br>
Multi-Colors<br>
</p>
<hr>
<strong>Get it for</strong>
<h4>
$0
</h4>
<a href="#" class="btn btn-blue">
Download now!
</a>
<a href="docs/aligned/" class="btn">
Documentation
</a>
</div>
<div class="unit-33 shadow-box">
<hgroup>
<h2>
ManageMeat
</h2>
<h2 class="subheading">
Account Management System
</h2>
</hgroup>
<p>
<b>Features</b><br>
Admin Panel<br>
MySQL Database<br>
Customizeable Account Info<br>
Built for security<br>
</p>
<hr>
<strong>Get it for</strong>
<h4>
$5
</h4>
<a href="#" class="btn btn-blue">
Purchase
</a>
<a href="#" class="btn">
Documentation
</a>
</div>
<div class="unit-33 shadow-box">
<hgroup>
<h2>
Order a Website
</h2>
<h2 class="subheading">
Professionally Designed & Affordable.
</h2>
</hgroup>
<p>
<b>Features</b><br>
We fit every budget<br>
Custom Design<br>
Self Customizable<br>
Installation of other software upon request<br>
</p>
<hr>
<strong>Price</strong>
<h4>
Catered to your need
</h4>
<a href="#" class="btn btn-blue">
Free Quote
</a>
<a href="#" class="btn">
Why Pixel Crescent?
</a>
/div>
</div>
</div>
</div>
</div>
<!--- Footer --->
<footer>
<div>
<h5>
Copyright Pixel Crescent © 2013-2014
</h5>
</div>
</footer>
<script>
$(document).ready(function() {
var nav_lft = $("#navbar-left");
var pos1 = nav_lft.position();
var nav_rgt = $("#navbar-right");
var pos2 = nav_rgt.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
//-----Left navbar
if (windowpos >= pos1.top)
nav_lft.addClass("stick-nav-left");
else
nav_lft.removeClass("stick-nav-left");
//-----Right navbar
if (windowpos >= pos2.top)
nav_rgt.addClass("stick-nav-right");
else
nav_rgt.removeClass("stick-nav-right");
});
});
</script>
</body>
</html>
答案 1 :(得分：1)
1）将ID添加到导航栏
2）使用以下Javascript：
$(document).ready(function() {
var s = $("#navbar");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
3）以及CSS类
.stick{
position:fixed;
top:0px;
z-index:99;
}