googleapis の 2 つの異なる jquery.min.js ファイルを使用しています。1 つはスライドショー (s3Slider) 用で、もう 1 つはユーザーが下にスクロールしたときに表示されるメニュー用です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>スライダーの場合
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>メニューについて
両方を持っていると、一方が下にスクロールすると、ページに沿ってメニューが下がらなくなります...
解決策はありますか？
以下は HTML に従います。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link rel="stylesheet" type="text/css" href="assets/styles/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/styles/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/styles/imgsldr.css" media="screen" />
<!--[if lt IE 9]><script type="text/javascript" src="assets/scripts/modernizr.js"></script><![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<blockquote>Genom att förena två sjöer skapar vi en framtid mitt i landbygden!</blockquote>
</p></div><br></div>
</header>
<div class="nav-container">
<nav>
<ul>
<li><a href="#hem" class="selected">Hem</a></li>
<li><a href="#om">Om projektet</a></li>
<li><a href="#sponsor">Sponsorer</a></li>
<li><a href="#galleri">Galleri</a></li>
<li><a href="#medlem">Bli medlem</a></li>
<li><a href="#styr">Styrelse och funkt.</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
<div class="nav-left"></div>
<div class="nav-right"></div>
<div class="nav-above"></div>
</nav>
</div>
<section id="hem">
<div class="row">
<div class="three columns">
<h4>Hem</h4>
<p> </p>
<div id="nyheter">
<p id="nyheterp">NYHETER</p>
<p><br>
</p>
<h5>Nyhet #1</h5>
</div>
</div>
<div class="nine columns">
<h4>Bilder från projektet </h4>
<!-- begins slider -->
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<img src="assets/gallery/1.jpg" alt="Bild 1" />
<span class="top"><strong>Bild #1</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/2.jpg" alt="Bild 2" />
<span class="top"><strong>Bild #2</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/3.jpg" alt="Bild 3" />
<span class="top"><strong>Bild #3</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/4.jpg" alt="Bild 4" />
<span class="top"><strong>Bild #4</strong><br />Beskrivning...</span>
</li>
<li class="sliderImage">
<img src="assets/gallery/5.jpg" alt="Bild 5" />
<span class="top"><strong>Bild #5</strong><br />Beskrivning...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
<!--end slider -->
<footer>
<a href="#" target="_blank"><img src="assets/images/facebook.png" alt="Facebook" /></a>
<a href="#" target="_blank"><img src="assets/images/twitter.png" alt="Twitter" /></a>
</footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="assets/scripts/waypoints.min.js"></script>
<script type="text/javascript" src="assets/scripts/navbar.js"></script>
<script type="text/javascript" src="assets/scripts/functions.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</body>
</html>