用HTML和CSS jQuery腳本

-3

我在同一個文件夾這些文件：用HTML和CSS jQuery腳本

的index.html
的style.css
的script.js

我想要的資產淨值＃當我滾動時，菜單是nav＃menu.sticky。它應該像http://iconmonstr.com/但沒有。我只知道HTML和CSS。

的index.html

<!DOCTYPE html> 
<title>Title</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="style.css"> 
<script src="script.js"></script> 
<header id="main-header"> 
    <h1>Title</h1> 
    <h2>Slogan</h2> 
</header> 
<nav id="menu"> 
</nav> 
<section id="main-section"> 
</section> 
<footer id="main-footer"> 
    © 2014 Copyright 
</footer>

的style.css

* { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: sans-serif; 
} 

body { 
    margin: 0; 
} 

h1 { 
    font-size: 3em; 
    margin: 0; 
} 

h2 { 
    font-size: 2em; 
    margin: 0; 
} 

#main-header { 
    background: #08c; 
    color: #fff; 
    height: 10em; 
    padding: 2em; 
    text-align: center; 
} 

#menu { 
    background: red; 
    height: 3em; 
    width: 100%; 
} 

.sticky { 
    position: fixed; 
    top: 0; 
} 

#main-section { 
    border: 0.1em solid #ccc; 
    color: #444; 
    height: 1000px; 
} 

#main-footer { 
    font-size: 0.75em; 
    text-align: center; 
    margin: 1em; 
}

的script.js

$(document).ready(function() { 
    var menu = $("#menu"); 
    var pos = menu.position(); 

    $(window).scroll(function() { 
    if ($(window).scrollTop() >= pos.top) { 
     menu.addClass("sticky"); 
    } else { 
     menu.removeClass("sticky"); 
    } 
    }); 
});

來源

2014-04-19 user3552129

– Karuppiah

你是什麼意思「有沒有關係？」 – ElGavilan

該腳本不起作用，並且在JavaScript和Chrome的開發人員工具中，我沒有看到任何內容。 – user3552129

你在script.js使用jQuery，但你不包括圖書館。
您的HTML代碼格式錯誤。

請嘗試下面的代碼。它爲我工作。

<!DOCTYPE html> 
<html> 
<head> 
<title>Title</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="style.css"> 
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script> 
</head> 
<body> 
<header id="main-header"> 
    <h1>Title</h1> 
    <h2>Slogan</h2> 
</header> 
<nav id="menu"> 
</nav> 
<section id="main-section"> 
</section> 
<footer id="main-footer"> 
    © 2014 Copyright 
</footer> 

<script src="script.js"></script> 
</body> 
</html>

我改變了什麼？

我添加body和head標籤，
我已經把script包括jQuery的CDN從在head標籤，但你可以包括這只是包括你的腳本之前，它可以在本地加載，而不是從CDN，
我已將您的script標籤移到最後，因爲這通常是很好的做法。簡而言之，頁面渲染速度更快。

此外，您寫道：「腳本不起作用，並且在Firefox和Chrome的開發人員工具中，Javascript部分我什麼都看不到。」您應該在Chrome的控制檯標籤中看到：「Uncaught ReferenceError：$未定義」。

未來：您應該儘早粘貼代碼。

老：在HTML 4.x的類型屬性應規定：

試試這個：

<script src="script.js" type="application/javascript"></script>

爲downvoters信息。在html5中是可選的。

來源

2014-04-19 20:15:40 rzymek

「類型」屬性不是必需的，實際上很容易出錯。 – Pointy

@Pointy錯誤。 xhtml和html <5. http://www.w3.org/TR/REC-html40/interact/scripts.html – ElGavilan

@dfsq需要「type」屬性，我何時說它是OP有麻煩的原因？ – ElGavilan

當你的HTML文檔中輸入

<script src="script.js"></script>

，爲您打造一個「關係」（瀏覽器加載JS並解析其相應的）

也是一樣的CSS文件。如果他們在同一個頁面中，他們可以交互（你可以通過JS元素設置CSS類）

來源

2014-04-19 20:15:52 Valdas

好的，謝謝。我在我的代碼中發現一個錯字，對不起:) – user3552129

操作，沒有錯字。它不起作用 – user3552129

初學者給出了一個如何爲你的javascript文件提供函數的例子。
將文件添加到您的html源代碼時，您必須使用html語法。

<script src="script.js"> 
/** 
* Additional code may even go here 
*/ 
</script>

遵循此語法。
添加css文件時，您還需要繼續使用html語法。

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

來源

2014-04-19 20:20:37 cosban

用HTML和CSS jQuery腳本

回答

相關問題