滑动页面,顶部导航or顶部 固定在一个位置

时间:2021-11-12 03:17:11

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

  其实他的原理很简单, 就是一开始设置导航为相对定位,然后计算出滚动条离顶部的值 当大于这个值的时候 定位变成相对浏览器定位 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&period;&period;&period;)标签固定在一个位置(在页面最右边)

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

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

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

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

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

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

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

  6. react native &lpar;2&rpar; 嵌入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导航悬浮顶部&comma;stickUp

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

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

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

随机推荐

  1. MySQL 安装和启动服务,&OpenCurlyDoubleQuote;本地计算机 上的 MySQL 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。”

    MySQL 安装和启动服务,以及遇到的问题 MySQL版本: mysql-5.7.13-winx64.zip (免安装,解压放到程序文件夹即可,比如 C:\Program Files\mysql-5. ...

  2. Git设置及GitHub的使用

    把github上的help略略翻译一遍.备忘. First : 安装:ubuntu 下,终端输入命令: sudo apt-get install git-core git-gui git-doc Ne ...

  3. IoC容器Autofac正篇之解析获取&lpar;五&rpar;

    解析获取的方式有如下几种: Resolve class Program { static void Main(string[] args) { var builder = new ContainerB ...

  4. MPAndroidChart绘制图形表

    最近一个项目需要用到表格进行统计显示,本来用的是的achartengine,后来发现一个更加强大的开源框架MPAndroidChart. 下面简单介绍下MPAndroidChart,MPAndroid ...

  5. android视频库Vitamio

    之前尝试自己解码视频,然后播放显示,虽然音视频都可以播放,但是实现不了音视频的同步,所以使用第三方的视频库Vitamio来实现视频播放器功能,这样自己只需要实现播放解码的制作不不要关心底层解码和显示问 ...

  6. SVN仓库迁移到Git遇到的两个问题和解决办法

    OS: CentOS 7.0 准备: git svn git-svn sudo yum install git sudo yum install subversion sudo yum install ...

  7. Linux学习之CentOS&lpar;八&rpar;----文件与目录的默认权限与隐藏权限(转)

    文件与目录的默认权限与隐藏权限 一个文件有若干个属性, 包括读写运行(r, w, x)等基本权限,及是否为目录 (d) 与文件 (-) 或者是连结档 (l) 等等的属性! 要修改属性的方法在前面也约略 ...

  8. Mysql、SqlServer、Oracle三大数据库的区别

    一.MySQL 优点: 体积小.速度快.总体拥有成本低,开源: 支持多种操作系统: 是开源数据库,提供的接口支持多种语言连接操作 : MySQL的核心程序采用完全的多线程编程.线程是轻量级的进程,它可 ...

  9. 20145326蔡馨熤《网络对抗》—— Web基础

    20145326蔡馨熤<网络对抗>—— Web基础 1.实验后回答问题 (1)什么是表单. 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据 ...

  10. 一些 Google 搜索词

    (1) flex blazeds java; (2) flex 动画  || flex animation  || flex spark glow animation (3) flex glow效果 ...