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

  其实他的原理很简单, 就是一开始设置导航为相对定位,然后计算出滚动条离顶部的值 当大于这个值的时候 定位变成相对浏览器定位 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. 理解Java(StringBuffer和StringBuilder)

    StringBuffer可实现同步,StringBuilder线程不安全. 翻译自Java API英文文档 本质 StringBuffer 和 StringBuilder 均表示一个可变字符序列 这个 ...

  2. js/jquery/插件表单验证

    媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...

  3. Delphi 和 DFM

    Delphi et les DFM Depuis la toute première version de Delphi, celui-ci intègre des fichiers à l'exte ...

  4. Android Wear开发 - 卡片通知 - 第一节 : 添加Android Wear通知特性

    一. 前言说明 Android Wear大部分显示形式是卡片的形式,而最简单地支持Android Wear方式就是用通知**Notification**.而实现最简单的,非高度自定义的通知,则只需要在 ...

  5. 字符串(多串后缀自动机):HDU 4436 str2int

    str2int Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  6. sublime text3安装SublimeREPL--解决不能运行input()的问题

    原文地址:http://blog.chinaunix.net/uid-12014716-id-4269991.html 一.安装包管理器(如果已经安装可以忽略) 1.简单的安装方法:使用Ctrl+`快 ...

  7. poj1026

    题目大意:暗号 Bod 和 Alice 计划使用一种全新的编码方案,令人惊讶的是这不是一个公开的公匙密码,但是他们的编码基于密匙,在Philadelphia on February 16th他们的会议 ...

  8. IFTT-意大利金融交易税

    港交所公告,IFTT目前适用于Prada股份及其4只权证,所有于今年3月1日或之后买入Prada的投资者均要缴付IFTT.就股份而言,IFTT税率为交易价值的0.22%(2014年1月1日起将降至0. ...

  9. Intellij 部署maven项目

    一 部署Maven项目 1.下载和配置 (1)下载:maven.apache.org,点击download,下载apache-maven-3.3.9-bin.zip (2)配置环境变量: 环境变量包括 ...

  10. javascript 函数 方法

    函数 1.函数的定义 (1)function 函数名(x){ 函数执行体; } (2)var 函数名=function(x){ 函数执行体; }; 这种方法说明,在javascript中,函数就是一种 ...