需求及使用场景

想要实现侧边栏中的某个元素滚动到顶端后固定，滚动到初始位置后取消固定的效果。

代码实现

需要用到jquery,具体实现思路见如下代码。

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="application/javascript">

    $(function () {
        // 选择器，选择需要设置的元素
        var elm = $('#tag-widget'); 

        // 获取元素到浏览器窗体顶部的偏移量
        var startPos = $(elm).offset().top; 
        // 增加鼠标滚动触发的方法
        $.event.add(window, "scroll", function () {
            // 获取元素当前到浏览器窗口顶部的偏移量
            var p = $(window).scrollTop();
            // 判断如果当前偏移量>初始偏移量
            if ((p) > startPos) {  //to Top
               // 设置position属性为fixed
                $(elm).css('position', 'fixed');
                $(elm).css('top', '0px');
                $(elm).css('width', $('#secondary').width()); 
                $(elm).css('background', '#fff');   
       
     
            } else { //复原
                $(elm).css('position', '');
         

            }

        });
    });
</script>

2.7 注释

注释的好处很多，比如方便理解、查找或方便项目组里的其他开发人员了解你的代码，而且也方便以后你对自己的代码进行修改。

// 定义函数 showInfo
var a = function showInfo(){
    document.write('Hello,OrAndNot!');
}
/* project： Orandnot
*  author: 或且非
*  data: 2019-12-06
*/

上面的代码中，使用 // 进行了单行注释，/* 和 */ 包围的部分可以标记多行注释，这和PHP中很像。

2.6 转义字符

所谓的转义字符，指的是在默认情况下某些字符在浏览器是无法显示的，不过为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。

常用转义字符：

需要注意的细节：

• 如果是在document.write() 中换行，则应该用 <br/>

  document.write("第一行<br />第二行");
  

• 如果是在alert() 中换行，则应该用 \n

  alert("第一行\n第二行");

2.5 类型转换

类型转换，指的是将“一种数据类型”转换为“另外一种数据类型”。在JavaScript 中，共有两种类型转换。

• 隐式类型转换

隐式类型转换，指的是JavaScript 自动进行的类型转换。

var a = 1;
var words = "the number is "+ a;
console.log(words);
//返回 the number is 1,这里的int a 被隐式转换成了 string

• 显式类型转换

显式类型转换，指的是需要用代码强制进行的类型转换。

2.5.1 字符串转换成数字

Number()

Number() 只能转换内容为数字的数字型字符串（形如3.14,265...）。

var words = "1024";
typeof(Number(words)); //输出number
parseInt() 和parseFloat()

parseInt()和parseFloat()

parseInt() 和parseFloat 是提取“首字符为数字的任意字符串”中的数字，其中，parseInt() 提取的是整数部分，parseFloat() 不仅会提取整数部分，还会提取小数部分。

var words = "2019年12月5日";
console.log(parseInt(words)); //输出 2019
var words = "3.14是一个固定的值";
console.log(parseFloat(words)); // 输出3.14
console.log(parseInt(words)); //输出3

parseInt() 会从左到右进行判断，如果第一个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第一个字符是非数字，则直接返回NaN(Not a Number)。

因为加号和减号在数学上其实就是表示一个数的正和负，所以parseInt() 可以接受第一个字符是“+”或“-”。同样的，parseFloat() 也有这个特点。

parseFloat() 跟parseInt() 非常类似，都是从第一个字符从左到右开始判断。如果第一个字符是数字，则继续判断，直到出现除了数字和小数点之外的字符为止；如果第一个字符是非数字，则直接返回NaN。
在“首字母是+、- 或数字的字符串”中，不管是整数部分，还是小数部分，parse Float() 同样可以转换。这一点上跟parseInt() 是不一样的。

2.5.2 数字转换成字符串

在JavaScript 中，想要将数字转换为字符串，也有两种方式。

• 与空字符串相加

  var a = 1;
  var words = "the number is "+ a;
  console.log(words);
  //返回 the number is 1,这里的int a 被隐式转换成了 string

• toString()

  var a = 3.14159265378;
  typeof(toString(a)); // 输出 string
  typeof(a.toString()); // 输出 string

在实际开发中，如果想要将数字转换为字符串，我们很少使用toString() 方法，而更多地使用隐式类型转换的方式。

2.4 表达式与语句

一个表达式包含“操作数”和“操作符”。操作数可以是变量，也可以是常量。操作符指的就是我们之前学的运算符。每一个表达式都会产生一个值。

语句，简单来说就是用（;）（英文分号）分开的一句代码。一般情况下，一个分号对应一个语句。

var words = " 这是一个语句";

对于表达式和语句，我们可以简单认为“语句就是JavaScript 的一句话”，而“表达式就是一句话的一部分”。一个表达式加上一个分号就可以组成一个语句。

2.3 Javascript中的运算符

在JavaScript中， 运算符指的是“变量”或“值”进行运算操作的符 号。 在JavaScript中，常见的运算符有五种，
分别是算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符。

2.3.1 算术运算符

在JavaScript 中，算术运算符一般用于实现“数学”运算，包括加、减、乘、除等。

加法运算符

在JavaScript 中，加法运算符并非想象中那么简单，我们需要注意三点。

1. 数字+ 数字= 数字

var a = 1, b = 1;
console.log(a+b); //输出 2

1. 字符串+ 字符串= 字符串

var a = '1',b = '1';
console.log(a+b); //输出 11

1. 字符串+ 数字= 字符串

var a = '1',b = 1;
console.log(a+b); //输出 11，b被转换成字符串

2.3.2 赋值运算符

在JavaScript 中，赋值运算符用于将右边表达式的值保存到左边的变量中。

“var a+=b”其实就是“var a=a+b”的简化形式，+=、-=、*=、/= 这几个运算符其实就是为了简化代码而出现的，大多数有经验的开发人员都喜欢用这种简写形式。

2.3.3 比较运算符

在JavaScript 中，比较运算符用于将运算符两边的值或表达式进行比较，如果比较结果是对的，则返回true；如果比较结果是错的，则返回false。

对于一条语句，都是先运算右边，然后再将右边结果赋值给左边变量。

2.3.4 逻辑运算符

在JavaScript 中，逻辑运算符用于执行“布尔值的运算”。其中，逻辑运算符经常和比较运算符结合在一起使用。

2.3.5 条件运算符

2.2 js数据类型

在JavaScript 中，基本数据类型有五种：数字、字符串、布尔值、未定义值和空值。
而常见的引用数据类型有两种：数组、对象。

2.2.1 数字

数字是最基本的Js数据类型。所谓的数字，就是数学中的数字，如10、-10、3.14 等。JavaScript 中的数字是不区分“整型（int）”和“浮点型（float）”的。在JavaScript 中，所有变量都是用var 声明。

var m = 3.14159265378;
var n = 1001;
document.write(m+n);

2.2.2 字符串

在JavaScript 中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。

var mystring="我买几个橘子去。你就在此地，不要走动";
console.log(mystring);

Tips: 双引号 Or 单引号？

 // 1．单引号括起来的一个或多个字符
'Happy'
'Do not worry'
// 2．双引号括起来的一个或多个字符
"Me"
"Forgive Me!"
// 3．单引号括起来的字符串中可以包含双引号
' I want "Money" '
// 4．双引号括起来的字符串中可以包含单引号
" I Got 'Nothing'"

单引号括起来的字符串中，不能含有单引号，只能含有双引号。同理，双引号括起来的字符串中，不能含有双引号，只能含有单引号。如果数字加上双引号，这个时候JavaScript 会把这个数字当做字符串来处理，而不是当做数字来处理。

var p = 3.14; // p是一个数字
var p = '3.14'; // p是一个字符串

2.2.3 布尔值

布尔是bool 的音译，是以英国数学家、布尔代数的奠基人乔治·布尔（George Boole）来命名的,布尔值最大的用途就是：选择结构的条件判断。布尔类型的值只有两个：true 和false。true 表示“真”，false 表示“假”。

var a = 3, b = 4;
console.log(a>b);

上面的代码会输出false。

2.2.4 未定义值

在JavaScript 中，未定义值，指的是如果一个变量虽然已经用var 来声明了，但是并没有对这个变量进行赋值，此时该变量的值就是“未定义值”。其中，未定义值用undefined 表示。

var undefinedvar;
console.log(undefinedvar);

上面的代码会输出undefined。

2.2.5 空值

数字、字符串等数据在定义的时候，系统都会分配一定的内存空间。在JavaScript中，空值用null 表示。如果一个变量的值等于null，如var n = null;，则表示系统没有给这个变量n 分配内存空间。

var nullvar = null;

2 Javascript语法基础

Js用法的主要内容：

1. 常量与变量
2. 数据类型
3. 运算符
4. 表达式与语句
5. 类型转换
6. 转义字符
7. 注释

2.1 常量与变量

Js脚本的每一条语句都以;结尾，变量就是指在运行过程中可以被改变的量，而常量就是在运行过程中不能被改变的量。

var a = 4;
var a = a + 1;
console.log(a);

上面的代码会输出 5 ，这里的a就是一个变量。

2.1.1 变量的命名

• 变量由字母、下划线、$ 或数字组成，并且第一个字母必须是“字母、下划线或$”。
• 变量不能是系统关键字和保留字。
• 变量的命名一定要区分大小写，例如变量age 与变量Age 在JavaScript 中就 是两个不同的变量。

系统关键字和保留字：

js中的系统关键字：
break else new typeof case false null var catch for switch void continue function this while default if throw with delete in true do instanceof try
js中的系统保留字：
abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public
浏览器中的系统保留字：
alert eval location open array focus math outerHeight blur funtion name parent boolean history navigator parseFloat date image number regExp document isNaN object status escape length onLoad string

2.1.2 变量的使用（声明和赋值）

语法： var 变量名 = 值

var a = 3;
var $words = "字符串";
var myfunc = function(){....}
// 另外一种形式
var a = 10, b = 20, c = 30;
// 等同于 var a = 10; var b = 20;....

2.1.3 常量

一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：

var DEBUG = 1;

基础工具：

1. Node.js
   https://nodejs.org/en/
2. VS Code
   https://code.visualstudio.com/
3. Chrome
   https://www.google.com/chrome/

参考教程：

书籍：Web开发精品课-Javascript基础教程
参考源码：Javascript基础教程 源码

1 基础知识

1.1 javascript在网页中的引入

js脚本有三种引入方式：

• 外部引入
  在html的头部或者body引入外部脚本文件:

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

• 内部引入
  在html的头部或者body部分使用<script>标签声明：

<html>
<head>
.....
<script>
console.log('Hello,Workplex!');
</script>
</head>
<body>
<script>
console.log('Hello,Workplex!');
</script>
</body>
</html>

• 元素事件
  可以为某个Html元素定义事件：

<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value=" 按钮" onclick="alert('WorkPlex!')"/>
</body>
</html>

也可以为某个元素调用事件方法：

<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
function plex(){
console.log('点击了按钮');
}
</script>
</head>
<body>
<input type="button" value=" 按钮" onclick="plex()"/>
</body>
</html>