<!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. 官方新出的 Kotlin 扩赞库 KTX，到底帮你干了什么？

    Kotlin KTX 2月5号的时候,Google 发布了一款 Kotlin 的扩展库,叫 Android KTX,不过现在还处于预览版的状态.它能使 Android 上的 Kotlin 代码更简洁, ...

  2. 玩转webpack（二）：webpack的核心对象

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者介绍:陈柏信,腾讯前端开发,目前主要负责手Q游戏中心业务开发,以及项目相关的技术升级.架构优化等工作. 前言 webpack 是一个强大的模 ...

  3. 前端 js技术

    1.JavaScript代码存在形式 <!-- 方式一 --> <script type"text/javascript" src="JS文件" ...

  4. ant基础[转]

    原文链接:http://www.cnblogs.com/wufengxyz/archive/2011/11/24/2261797.html 1,什么是antant是构建工具2,什么是构建概念到处可查到 ...

  5. VC调用Delphi对象接口

    说在前头 很久没有碰Delphi的东西了,今天有个朋友让我帮他将一个Delphi中已经实现的功能在VC中进行使用,虽然后来又用VC的方式实现了该功能,但是在实现过程中想到了这样的调用方式,特写下本文以 ...

  6. VS2010+opencv2.4.10+gsl_1.8配置实现RobHess的SIFT程序

    最近在做sift方面的毕业设计,弄了一天终于把RobHess的SIFT程序调通了.虽然网上有很多相关博文,但是我还是想把我的调试的过程跟大家分享一下.由于工程没法在博文上传,所以有需要的可以在下方留言 ...

  7. Linux下jdk环境配置

    1.下载jdk http://www.oracle.com/technetwork/java/javase/downloads/index.html 我选择64位的版本 jdk-8u121-linux ...

  8. Access denied for user 'root'@'localhost' (using password: YES)的解决

    今天使用phpmyadmin登录远程数据库所以改了一些配置,结果回过头来登录本地mysql时来了一句mysql Access denied for user 'root'@'localhost' (u ...

  9. Linux中的 awk查找日志中的相关记录

    假设要在 api.log.201707201830 文件中,(此文件的多个字段数据以不可见字符^A(键盘上按下Ctrl+V+A)分隔),要输出第70个字段: awk -F '^A' '{print $ ...

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

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