Javascript 简单的移动方式<；脚本>；JS文件的代码_Javascript_Html_Navbar

Javascript 简单的移动方式<；脚本>；JS文件的代码

javascript html

Javascript 简单的移动方式<；脚本>；JS文件的代码,javascript,html,navbar,Javascript,Html,Navbar,我有一个简单的问题。使用is示例代码，我只想将JS代码从.html文件移动到外部.JS文件我已经尝试将中当前的所有代码移动到themes.js，然后将添加到我的.html文件中，但是我在编写themes.js时收到许多错误警报。我们将非常感谢您的帮助。多谢各位 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

我有一个简单的问题。使用is示例代码，我只想将JS代码从

.html

文件移动到外部

.JS

文件

我已经尝试将

中当前的所有代码移动到

themes.js

，然后将

添加到我的

.html

文件中，但是我在编写

themes.js

时收到许多错误警报。我们将非常感谢您的帮助。多谢各位

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>


身体{
保证金：0；
字号：28px；
字体系列：Arial、Helvetica、无衬线字体；
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}
向下滚动
向下滚动以查看粘性效果
粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

以下是您所说的您想做的事情的示例

这是原件-

这是将javascript分离到另一个名为themes.js的文件中


身体{
保证金：0；
字号：28px；
字体系列：Arial、Helvetica、无衬线字体；
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}
向下滚动
向下滚动以查看粘性效果
粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

您遇到了什么错误？请告诉我们错误，如果找不到404，则.html和.js的目录不一样。在scrypt路径中包含目录传递，或者将.js文件移动到同一个目录。您是否从js文件中省略了

？是的，我省略了

部分。我得到的错误是：

错误：“窗口”未定义。[no undef]

对于

window.onscroll=function（）{

则未定义

错误：“document”。[no undef]

对于

var navbar=document.getElementById（“navbar”）；

则未定义

错误：“window”。[no undef]

对于

如果（window.pageYOffset>=sticky）{

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
  <script src="themes.js"></script>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>


</body>
</html>