<!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. $.ajax()实现简单计算器

    1.html页面  a.html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. Matlab实用技巧

    1  Matlab Cell 编程模式 在一个长长的脚本m文件中,可能需要对其中的一段反复修改,查看执行效果,这时,cell模式就非常有用了.cell模式相当于将其中的代码拷贝到命令窗口中运行.两个% ...

  3. CentOS 7 yum 安装 MySQL5.7

    1.下载 MySQL 官方的 Yum Repository ,官网地址:https://dev.mysql.com/downloads/repo/yum/ 从 MySQL 官网选取合适的 MySQL ...

  4. 百度网盘不限速下载软件 Pan Download

    百度网盘不限速下载软件 Pan Download Pan Download下载软件是一款电脑端的快速下载器软件,您可以通过Pan Download直接下载百度网盘中的资源,此款软件下载速度快,下载压缩 ...

  5. Git 生成 SSH 公钥

    2018-01-05 11:24:04 许多 Git 服务器都使用 SSH 公钥进行认证. 为了向 Git 服务器提供 SSH 公钥,如果某系统用户尚未拥有密钥,必须事先为其生成一份. 这个过程在所有 ...

  6. centos7+ansible自动化工具使用

    一.基础介绍 ========================================================================================== 1. ...

  7. AppScan扫描结果分析及工具栏使用

    Appscan的窗口大概分三个模块,Application Links(应用链接), Security Issues(安全问题), and Analysis(分析) Application Links ...

  8. hexo搭建博客上传至github

    准备工作 ssh key 要先申请好,并且添加至github的ssh库中 安装插件 hexo-deployer-git npm install hexo-deployer-git --save 配置 ...

  9. iOS-Mac配置Tomcat【Mac环境配置Tomcat】

    Tomcat配置 1.官网下载Tomcat配置包:http://tomcat.apache.org/download-70.cgi 2.下载之后,将解压后的的整个文件夹重新命名:ApacheTomca ...

  10. 制作 alipay-sdk-java包到本地仓库

    一.首先 搭建好maven 基础环境,本地可以运行maven 命令 从支付宝官网上下载sdk https://doc.open.alipay.com/doc2/detail?treeId=54& ...