현재 내 웹 페이지에서 sticky.js을 작동 시키려고합니다 ... navbar에서 - 그리고 불행히도 작동하지 않습니다! 두 개의 다른 플러그인을 시도했지만 둘 다 작동하지 않습니다!Sticky.js가 작동하지 않는 것 같습니다.
모르는 사람을 위해, 플러그인 뒤에있는 생각은 특정 html 요소가 화면 아래로 내려 가면 '붙어 있어야합니다'라고 생각합니다. 나는 codeanywhere.com에서 영감을 받았습니다. 탐색 메뉴를 사용하고 비슷한 것을하고 싶습니다!
누군가 내 website page을보고 신경 쓸까요? 내 current (Same as sticky.js link from above) 끈적한 플러그인이 작동하지 않는 이유는 무엇입니까?
자바 스크립트는 전적으로 초보자입니다. 어떤 도움이라도 대단히 감사합니다.
를 아래 코드 아래 시도
변경점 :
1) 머리 부분에서 끝 부분에 자바 스크립트를 개정 머리에
2) 포함 개정 스타일 (사용자의 요구 사항에 따라 변경)
3) JQuery와 CDN을 포함.
<!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) 자바 스크립트 이하 사용) 당신의 네비게이션 바
2에 ID를 추가합니다 ...
$(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;
}
작동하지 않는 것 같습니다. 내가 사용한 코드를 확인할 수 있습니까? 업데이트 된 페이지에 있습니까? – muffinjello
감사합니다. 오른쪽 navbar와 함께 약간의 고민을 가지고있다. 그래서 나는 이것을 지금 잡아두기로 결정했다. .. 관계없이, 당신에게 그렇게 많이 고맙다! – muffinjello