<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js 滚动导航定位</title>

    <style>

        body {

            margin: 0;

            text-align: center;

            font-family: sans-serif;

        }

        .fixed {

            position: fixed;

            top: 0;

        }

        .sticky {

            width: 100%;

            background: #F6D565;

            padding: 25px 0;

            text-transform: uppercase;

        }

    </style>

</head>

<body>

    <p style="margin-bottom:100px;">Scroll this page.</p>

    <div class="sticky"><h3>Super amazing header</h3></div>

    <p style="margin-top:500px;">Still there?</p>

    <p style="margin-top:500px;">Yep!</p>

    <p style="margin-top:500px;">Scroll so hard!</p>

    <script>

        var sticky = document.querySelector('.sticky');

        var origOffsetY = sticky.offsetTop;

        function onScroll(e) {

            window.scrollY >= origOffsetY ? sticky.classList.add('fixed') : sticky.classList.remove('fixed');

        }

        document.addEventListener('scroll', onScroll);

    </script>

</body>

</html>

js 滚动到一定位置导航定位在页面最顶部的更多相关文章

  1. 基础业务：滚动到指定位置导航固定（CSS实现）

    最近公司做的业务都是使用Vue.Element写的,涉及到的相应的基础业务像轮播.预加载.懒加载,都是使用 NPM上的工具来实现,原理和基础还是要有的,就来实现几个项目中常用到的业务. 经常见到这样的 ...

  2. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

  3. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  4. js滚动到指定位置显示或隐藏元素

    $(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_ ...

  5. js，html-点击直接跳转到页面底/顶部

    案例一:js控制,无滑动效果 <html> <body> <a href="javascript:void(0);" onclick="ja ...

  6. js-滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta c ...

  7. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  8. jquery 滚轴滚动 导航定位和锚点定位

    自己写的,只测试了ie9+, firefox,chrome 以下js更好 var fixbar={ init:function(){ "use strict"; // 滚轴 导航位 ...

  9. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

随机推荐

  1. 重定向stdin stdout stderr |

    在Linux下,当一个用户进程被创建的时候,系统会自动为该进程创建三个数据 流,也就是题目中所提到的这三个.那么什么是数据流呢(stream)? 我们知道,一个程序要运行,需要有输入.输出,如果出错, ...

  2. linux安全篇

    笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 1.限制用户su 限制能su到root的用户. 操作步骤 使用命令 vi /etc/pam.d/su修改配置文件, ...

  3. Ubantu搭建FTP

    1.安装并启动 FTP 服务 安装 VSFTPD 使用 apt-get 安装 vsftpd kylin@kylin:~$ sudo apt-get install vsftpd -y [sudo] p ...

  4. 13 Basic Cat Command Examples in Linux(转) Linux中cat命令的13中基本用法

    Cat (串联) 命令是Linux/Unix开源系统中比较常用的一个命令.我们可以通过Cat命令创建一个或多个文件,查看文件内容,串联文件并将内容输出到终端设备或新的文件当中,这篇文章我们将会以实例的 ...

  5. bootstrap select2 使用简单介绍

    1. 基本属性配置: $("#select2-id").select2({ templateResult : formatState, // 列表带图片 templateSelec ...

  6. 解决在Ubuntu系统下用matplotlib作图时出现中文乱码问题

    今天在jupyter notebook中画图时,中文不能正常显示,如下图所示: 在此记录一下解决的办法. 1.找到matplotlib配置文件的位置 import matplotlib print(m ...

  7. 节点操作,节点属性的操作及DOM event事件

    ##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...

  8. JDBC为什么要使用PreparedStatement而不是Statement

    PreparedStatement是什么? PreparedStatement是java.sql包下面的一个接口,用来执行SQL语句查询,通过调用connection.preparedStatemen ...

  9. js中定义对象的几种方式

    转载:http://blog.sina.com.cn/s/blog_60f632050100wz7h.html (1)基于已有对象的扩充方法:适用于临时构建对象,弊端:每次构建对象都要新建一个. va ...

  10. 洛谷 [P1801] 黑匣子

    这道题是一道splay裸题,然而身为蒟蒻的我并不会,所以这道题我维护的是一个大根堆与一个小根堆结合起来的类似沙漏的结构. 本题难点在于询问的不是最大最小值,而是第K小值,所以我们想到了维护这样两个堆, ...