js相关小实例——滚动监听

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px}
</style>
</head>

<body>

<div style="width:100%; height:100px; background-color:#63F"></div>
<div id="menu" style="width:100%; height:50px; background-color:#F36;"></div>

<input type="button" value="滚动" onclick="gun()" />

<div style="width:100%; height:1000px; background-color:#FF6"></div>

</body>
<script type="text/javascript">

window.onscroll = function(){
        var d = document.getElementById("menu");
        if(window.scrollY >= 100)
        {
            d.style.position = "fixed";
            d.style.top = "0px";

        }
        else
        {
            d.style.position = "relative";
        }

    }

    function gun()
    {
        window.scrollTo(0,100);
    }

</script>
</html>

点击滚动按钮后

时间: 2024-12-18 21:28:23

js相关小实例——滚动监听的相关文章

Bootstrap入门(二十六)JS插件3:滚动监听

很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这将是该元素<body>).然后添加data-target任何引导的父元素的ID或类属性.nav的组件. 我们来写一个基本的实例 先引入CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 我

支付宝小程序滚动监听吸顶效果

axml部分 <view class=" {{menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view> axss部分 .fixed{position: fixed; top: 0; } js部分 Page({ data: { menuFixed:"", }, // 监听页面滚动距离scrollTop onPageScroll: function(e) { var that = thi

Bootstrap学习js插件篇之滚动监听

1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: [html] view plaincopy <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation"> <div class="navbar-header&quo

js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)

最近做项目涉及到多个DIV切换效果,包括普通按钮点击切换和鼠标滚轮上下滚动切换等:其主要涉及到的内容就是鼠标滚轮上下切换的事件监听,此处是第一次接触到,故在此记录一下:也希望能帮到各位有需要的朋友. 以下为项目实例: $(function() { var count = $("#sysCount").val();    var isUp = false; // 初始化子系统模块    if (count > 6) {        $("#panel").cs

js相关小实例——进度条

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

js相关小实例——滑动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Bootstrap的js插件之滚动监听

data-spy="scroll"--向您想要监听的元素(通常是 body)添加滚动监听事件 . data-target=".navbar"--指明导航条为监听目标: data-offset="70"--计算滚动位置时相对于顶部的偏移量(像素数); <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8&

bootstrap滚动监听

Bootstrap ScrollSpy(滚动监听)是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容 官方说的想要利用此功能需要引入以下文件: bootstrap/css/bootstrap.css    jquery.1.9.1.js    bootstrap.js    bootstrap-dropdown.js    bootstrap-scrollspy.js 不过经过测试 只需要前三个即可 以下是我测试的代码: <!DOCTYP

滚动监听(bootstrap)

1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.static.runoob.com