HTML部分：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div>

    <h2>scroll</h2>

    <div id="nav">

        <div class="f1">floor1</div>

        <div class="f2">floor2</div>

        <div class="f3">floor3</div>

        <div class="f4">floor4</div>

        <div class="f5">floor5</div>

    </div>

    <p>

        页面结构

    </p>

    <div class="main">

        <div id="f1">测试1</div>

        <div id="f2">测试2</div>

        <div id="f3">测试3</div>

        <div id="f4">测试4</div>

        <div id="f5">测试5</div>

    </div>

</div>

</body>

</html>

CSS部分：

    <style>

        .main div {

            height: 970px;

            width: 300px;

            margin: 20px;

            background-color: #C0C0C0;

        }

        #nav {

            position: fixed;

            width: 100px;

            height: 200px;

            top: 40%;

            right: 10px;

        }

        #nav div {

            cursor: pointer;

            text-align: center;

        }

    </style>

JS部分：

<script>

    $(function () {

        $(window).scroll(function () {//为页面添加页面滚动监听事件

            var wst = $(window).scrollTop(); //滚动条距离顶端值

            for (var i = 1; i < 6; i++) {             //加循环

                if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置

                    $('#nav div').css("background-color", "white");

                    $(".f" + i).css("background-color", "red");

                }

            }

        });

        $('#nav div').click(function () {

            $('html').animate({scrollTop: $("#" + this.className).offset().top}, 500);

            // $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()

        });

    });

</script>

JS监听滚动条进度的更多相关文章

  1. js监听滚动条 回到顶端

    效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...

  2. js监听滚动条事件

    (function () { if(document.addEventListener){ document.addEventListener('mousewheel',scrollFunc,fals ...

  3. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  4. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  5. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  6. js监听用户的键盘敲击事件，兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  7. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

  8. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  9. 使用web3.js监听以太坊智能合约event

    传送门: 柏链项目学院 使用web3.js监听以太坊智能合约event   当我们在前端页面调用合约时发现有些数据不会立即返回,这时还需要再调用更新数据的函数.那么这样的方法使用起来非常不便,监听ev ...

随机推荐

  1. jQuery-mobilevalidate使用 的一些心得，小小总结

    在做M站时比较纠结的是表单验证,不像pc端,移动端的验证要求插件更小更轻量,更加灵活,说不定是冒气泡的报错提示?! 介绍一款好用的移动端的表单验证插件:jQuery-mobilevalidate: 代 ...

  2. Python2基础

    1.python 3.python函数 python的函数定义: 以def关键字定义一个函数: 参数放在小括号里面: 必须有return语句: 关键字参数: 即调用函数时传参顺序可以人为指定 默认参数 ...

  3. js正則表達式

    正則表達式實例化的兩種方式: 字符型 var a=// 對象型var a=new RegExp(,) 修飾符: i:忽略大小寫 g:全局搜索 m:多行搜索 元字符: \轉義字符 \w:字符,數字,下劃 ...

  4. Python——进程队列

    队列 先进先出 from multiprocessing import Queue q = Queue(5) #队列的大小 q.put(1) #放入内容 q.put(2) #放入内容 q.put(3) ...

  5. redis.clients.jedis.exceptions.JedisDataException ：READONLY You can't write

    分布式直连同步调用测试时出现的错误:主从复制架构下,默认Slave是只读的,如果写入则会报错: redis.clients.jedis.exceptions.JedisDataException: R ...

  6. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  7. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  8. C 语言----- 指针

    指针是一个值为内存地址的变量, 指针的核心是它是一个变量, 只不过它是用来存放内存地址的, 所以在了解指针之前,先说一下什么是变量.变量就是在内存中开辟的一个空间.如int year, 就是在内存中开 ...

  9. BZOJ 1443 游戏(二分图博弈)

    新知识get. 一类博弈问题,基于以下条件: 1.博弈者人数为两人,双方轮流进行决策.2.博弈状态(对应点)可分为两类(状态空间可分为两个集合),对应二分图两边(X集和Y集).任意合法的决策(对应边) ...

  10. JarvisOJ BASIC -.-字符串

    请选手观察以下密文并转换成flag形式 ..-. .-.. .- --. ..... ..--- ..--- ----- .---- ---.. -.. -.... -.... ..... ...-- ...