<!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. 【转】wget

    wget 下载整个网站,或者特定目录 需要下载某个目录下面的所有文件.命令如下 wget -c -r -np -k -L -p www.xxx.org/pub/path/ 在下载时.有用到外部域名的图 ...

  2. 分析AJAX抓取今日头条的街拍美图并把信息存入mongodb中

    今天学习分析ajax 请求,现把学得记录, 把我们在今日头条搜索街拍美图的时候,今日头条会发起ajax请求去请求图片,所以我们在网页源码中不能找到图片的url,但是今日头条网页中有一个json 文件, ...

  3. Selenium UI自动化解决iframe定位问题

      更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6735116.html 一个阴雨霏霏 ...

  4. SAP BAPI创建批次 为保存内部对象号

    使用BAPI:BAPI_BATCH_CREATE 创建批次时,能够保存成功,但是MCH1表和KSSK表中没有内部对象号. 无奈,查找源码. 最后在BAPI中调用的这个函数这里找到了问题.此处kzcla ...

  5. 洛谷 [P1403] 约数研究

    本题的思想很好,正难则反 首先如果暴力枚举每个数的约数个数,一定会超时,那么我们就从约数的角度考虑,题目中问的是1~n的约数个数和,那么我们就枚举约数,看每个约数在1~n中出现过几次. #includ ...

  6. BZOJ 1299: [LLH邀请赛]巧克力棒 [组合游戏]

    每次一人可以从盒子里取出若干条巧克力棒,或是将一根取出的巧克力棒吃掉正整数长度. Nim游戏多了一个决策:拿出一些石堆 显然只要给对方构造异或和为0的子集就行了 暴枚子集... #include &l ...

  7. qt的编译

    cp qt-everywhere-opensource-src-5.5.0.tar.gz /opt/qt/2.1 解压qt源码 sudo tar xzf qt-everywhere-opensourc ...

  8. weblogic修改jdk版本遇到的问题与解决方法

    1.修改setDomainEnv ,路径.../domains/xx_domain\bin\ 1.1修改JAVA_HOME为需要修改的路径 注意:BEA_JAVA_HOME路径不需修改 2.修改路径后 ...

  9. 在 Mac 中安装 MySQLdb (Python mysql )

    安装环境:OS X操作系统,Python 2.7.3. MySQLdb其实包含在MySQL-python包中,因此无论下载还是在pip中search,都应该是搜寻MySQL-python. 以下将说明 ...

  10. 广告中的AdNetwork、AdExchange、DSP、SSP、RTB和DMP是什么？

    [https://www.douban.com/note/557732418/?type=rec] AdNetwork.AdExchange.DSP.SSP.RTB.DMP这些模式之间存在着内在的关系 ...