滑动页面,顶部导航or顶部 固定在一个位置
现在很多页面 特别是电商用的比较多 比如电商里面某个商品的详细页 往下拉页面 当滚轮到达一定位置的时候 导航栏即固定在顶部
其实他的原理很简单, 就是一开始设置导航为相对定位,然后计算出滚动条离顶部的值 当大于这个值的时候 定位变成相对浏览器定位 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顶部 固定在一个位置的更多相关文章
- 横向滑动页面,导航条滑动居中的 js 实现思路
最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...
- css把容器级别(div...)标签固定在一个位置(在页面最右边)
.process{ border:1px solid #B7B7B8; background:#F8F8F8; width:80px; height:250px; <!--固定定位; text- ...
- uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- react native (2) 嵌入h5页面 设置顶部导航
嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- Bootstrap导航悬浮顶部,stickUp
stickUp 一个 jQuery 插件 这是一个简单的jQuery插件,它能让页面目标元素 “固定” 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置.此插件可以在多页面的网站上工 ...
- uni-app实现顶部导航栏显示按钮+搜索框
最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...
随机推荐
- 跨平台的zip文件压缩处理,支持压缩解压文件夹
根据minizip改写的模块,需要zlib支持 输出的接口: #define RG_ZIP_FILE_REPLACE 0 #define RG_ZIP_FILE_APPEND 1 //压缩文件夹目录, ...
- 转:PHP如何阻止用户上传成人照片或者裸照
原文来自于:http://www.hackbase.com/tech/2014-10-12/69367.html 当前,网络淫秽色情信息屡禁不止.屡打不绝,严重危害未成年人身心健康,严重败坏社会风气, ...
- Java中swap解惑
直接上代码…… public class Swap { public static void main(String[] args) { int a[] = new int[]{1,2}; Syste ...
- Guess
uvaLive4255:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&cat ...
- Unity 通过Animation实现控件位置的转换
Unity版本:4.5.1 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/unity3d_xyz/article/details/23035521,作者:CSDN in ...
- 【转】推荐--《Android深入浅出》----不错
原文网址:http://www.cnblogs.com/plokmju/p/Android_Book.html 承香墨影 推荐--<Android深入浅出> 基本信息 书名:Andro ...
- Android 开机自启动
首先实现开机自启动: 第一步创建一个广播接收者,如MyBootBroadcastReceiver.java package com.example; import android.content.Br ...
- 行为树(Behavior Tree)实践(1)– 基本概念
原文地址:http://www.360doc.com/content/15/0107/11/15099545_438831036.shtml 自从开博以来,每天都会关心一下博客的访问情况,看到一些朋友 ...
- 广度优先搜索BFS
广度优先搜索可以形成一个广度优先搜索树 算法时间为O(V+E),两重循环 输入:图g,起点start(int) 需要的数据结构:队列Q.color数组(存放每个顶点的颜色) 算法过程: 1. 预处理: ...
- 尚学堂 JAVA DAY12 概念总结
面向过程和面向对象的区别.(5 分)面向过程就好像:一位父亲吩咐自己8岁的小儿子去买啤酒.他需要考虑儿子从出门后的每一个步骤,叮嘱儿子出门怎么走,如何过马路,到了超市如何找到酒水区,怎么识别需要的品牌 ...