现在很多页面 特别是电商用的比较多 比如电商里面某个商品的详细页 往下拉页面 当滚轮到达一定位置的时候  导航栏即固定在顶部

  其实他的原理很简单, 就是一开始设置导航为相对定位,然后计算出滚动条离顶部的值 当大于这个值的时候 定位变成相对浏览器定位 top为0即可

  js代码如下 具体html css 代码 有空再写了

    

    $(window).scroll(function(){

    var y = window.scrollY;//754到达
    if(y > 754){
    $("#mynav").css({position:"fixed",top:0});
    }else{
    $("#mynav").css({position:"relative"});
    }

    });

滑动页面,顶部导航or顶部 固定在一个位置的更多相关文章

  1. 横向滑动页面,导航条滑动居中的 js 实现思路

    最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...

  2. css把容器级别(div...)标签固定在一个位置(在页面最右边)

    .process{ border:1px solid #B7B7B8; background:#F8F8F8; width:80px; height:250px; <!--固定定位; text- ...

  3. uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...

  4. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  5. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  6. react native (2) 嵌入h5页面 设置顶部导航

    嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...

  7. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  8. Bootstrap导航悬浮顶部,stickUp

    stickUp 一个 jQuery 插件 这是一个简单的jQuery插件,它能让页面目标元素 “固定” 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置.此插件可以在多页面的网站上工 ...

  9. uni-app实现顶部导航栏显示按钮+搜索框

    最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...

随机推荐

  1. bzoj3541: Spoj59 Bytelandian Information Agency

    Description        BIA机构内部使用一个包含N台计算机的网络.每台计算机被标号为1..N,并且1号机是服务器.计算机被一些单向传输线连接着,每条数据线连接两台计算机.服务器可以向任 ...

  2. google chrome中如何删除一条输入网址提示

    在google chrome中网站栏输入字母的时候会出现网址的提示,如下图: 之前遇到个问题,不知道之前打错了www.baidu.com为wwww.baidu.com(也会跳转到百度)导致一输入“w” ...

  3. BZOJ 3893 Cow Jog

    Description The cows are out exercising their hooves again! There are \(N\) cows jogging on an infin ...

  4. Extjs打开window窗口自动加载html网页

    Window inherits the autoLoad config option from Panel. Note that I included all config options below ...

  5. cf B Three matrices

    #include <cstdio> #include <cstring> #include <algorithm> using namespace std; ][] ...

  6. 关于form.item不兼容的问题

    form.item()能在IE下运行,在firefox中会报脚本错误,没有这个函数. 可以使用 Form.elements 方法得到 HTMLCollection 后再使用 item 方法获取表单内元 ...

  7. -_-#【jQuery】data

    .data() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  8. Socket(TCP)客户端请求和服务端监听和链接基础(附例子)

    一:基础知识回顾 一: Socket 类 实现 Berkeley 套接字接口. Socket(AddressFamily, SocketType,ProtocolType) 使用指定的地址族.套接字类 ...

  9. Java---对象与类的封装

    一.类和对象: package cn.hncu.Myclasslearn; /** * * @author hncu_chx * * Mylove amin */ /**类是一种数据类型,声明一个类就 ...

  10. CodeForces 588A

    题目链接: http://codeforces.com/problemset/problem/588/A 解题思路: 这个题目很简单, 就是前一天肉的价格比后面几天低还是高,如果是高的话,只要买当天份 ...