Question

我正在关注一些滚动后创建粘性导航的视频教程，我几乎完全复制了html，css和js，但似乎没有任何事情发生在我身上。

我预感到问题在于文件展示位置。但经过几个小时的努力来解决这个问题，我老老实实地完全不知道下一步该做什么了。我需要另一双眼睛。

此刻我想做的就是获得警报＆＃39;当我刷新页面时弹出，让我知道导航栏从顶部有多少像素。

提前致谢

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);


});

Answer 1

你正在尝试吃披萨。在加载jQuery之前尝试使用jQuery。

也不需要包含同一文件的最小版本和开发版本。只加载一个。

您的包含：

<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>

无法让我的.js在我的Dreamweaver文件中工作

1 个答案: