2015-02-17 57 views
-1

我在跟隨一個視頻教程來創建一個滾動後的粘滯導航,並且我幾乎完全複製了html,css和js,但似乎並沒有什麼正在爲我發生。無法讓我的.js在我的Dreamweaver文件中工作

我有一個預感,問題在於文件的位置。但經過數小時的試圖解決問題之後,我誠實地承擔了接下來要做的事情的全部損失。我需要另一雙眼睛。

我現在要做的所有事情都是在刷新頁面時彈出一個'提醒',讓我知道導航欄從頂部有多少像素。

在此先感謝

HTML

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Stickey Navigation</title> 

<link href="../Styles/sample-style.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="../Scripts/sample-script.js"></script> 
<script type="text/javascript" src="../Scripts/jquery-1.11.2.js"></script> 
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script> 

</head> 
<body> 

<!--container--> 
<div class="container"> 

    <h1>Sample Header</h1> 

    <!--navigation--> 
    <nav> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
     </ul> 
    </nav> 
    <!--end navigation--> 

    <h2>Content Header</h2> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

</div> 
<!--end container--> 

CSS

@charset "UTF-8"; 
/* CSS Document */ 

body { 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
} 

.container { 
margin: 100px; 
padding: 20px; 
box-shadow: 10px #333; 
} 

nav { 
max-width: 100%; 
background: #999; 
} 

nav ul, li { 
display: inline-block; 
background: #999; 
margin: 0; 
padding: 10px; 
} 

h1 { 
font-size: 4.6em; 
} 

JS/jQuery的

jQuery(document).ready(function() { 

var navOffset = jQuery("nav").offset().top; 
alert(navOffset); 


}); 

回答

2

你正在嘗試吃比薩餅之前,你做。您在加載jQuery之前嘗試使用jQuery。

也不需要包含同一個文件的min版本和dev版本。只加載一個。

你包括:

<script type="text/javascript" src="../Scripts/sample-script.js"></script> 
<script type="text/javascript" src="../Scripts/jquery-1.11.2.js"></script> 
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script> 

的方式應該是

<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="../Scripts/sample-script.js"></script>