<分区>
我目前正在尝试获取 sticky.js在我的网页上工作...在导航栏上 - 不幸的是它不起作用!我尝试了两种不同的插件，但似乎都不起作用!
对于那些不知道的人，这个插件背后的想法是它应该让某个 html 元素在你向下滚动时“卡住”到屏幕上......我受到了 codeanywhere.com 导航的启发菜单，并想做类似的事情!
有人介意看看我的website page吗？和故障排除为什么我的 current (Same as sticky.js link from above)粘性插件不起作用？
在 JavaScript 方面，我绝对是新手。非常感谢任何帮助。
最佳答案
尝试下面的代码...
变化:
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>
关于javascript - Sticky.js 似乎不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23718873/