滑动页面,顶部导航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"});
    }

    });

时间: 2024-08-02 15:58:31

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

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

最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导航栏滑动居中一样. 写出来挺有成就感的,做个记录.使用的框架是vue, 但思路无关框架. 首先看html的结构, <ul> <li class='active'>娱乐</li> <li>要闻</li> <li>体育</li>

jQuery 顶部导航跟随滚动,固定浮动在顶部

jQuery 顶部导航跟随滚动,固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容<

Android ViewPager和Fragment实现顶部导航界面滑动效果

在项目中,我们常常需要实现界面滑动切换的效果.例如,微信界面的左右滑动切换效果.那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果. 一. ViewPager 官方API 首先我们来看一下ViewPager官方给出的解释,如图: 具体意思如下: Layout 管理器允许用户可以在页面上,左右滑动来翻动页面.你可以考虑实现PagerAdapter接口来显示该效果. ViewPager很多时候会结合Fragment一块使用,这种方法使得管理每个页面的生命周期变得

可滑动的顶部导航页ViewPager和Fragment的使用

可滑动的顶部导航页ViewPager和Fragment的使用 通过ViewPager和Fragment实现侧滑切换导航栏的功能,如下图所示. 一.定义主布局文件main.xml 最上面是一个导航栏,分别有三个textview构成,然后再textview下面设置一个标签卡最下面是使用Android.support.v4.view.viewpager构成 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域.如下图所示: 这是需要达到的目标效果.其中Header和SideNav部分之间用固定定位实现就可以了,但是MainContent部分右侧的scroll bar确实不太好处理,主要存在两个问题: - 按照普通的方式基本都会铺满右侧整个可视区域,这使得顶部的Header的右侧有了一个滚动条区域,这对于顶部固定这个效果反差太明显. - 第二个问题是,如果Main

ViewPager和Fragment结合使用,可以做出顶部导航界面滑动效果

在项目中,我们常常需要实现界面滑动切换的效果.例如,微信界面的左右滑动切换效果.那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果. 一. ViewPager 官方API 首先我们来看一下ViewPager官方给出的解释,如图: 具体意思如下: Layout 管理器允许用户可以在页面上,左右滑动来翻动页面.你可以考虑实现PagerAdapter接口来显示该效果. ViewPager很多时候会结合Fragment一块使用,这种方法使得管理每个页面的生命周期变得

【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas

顶部导航条如果你细心留意下现在的页面,实在是太常见了.这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现.与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas.不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的.一个导航活活地占据了页面大量位置.这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的. 使用AmazeUI做出来的效果如下: 首先是顶部导航栏的代码: <!--这里的顶部导航栏与Boot

如何将导航栏始终固定在窗口顶部

如何将导航栏始终固定在窗口顶部:在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.

Js控制网页滑动的时候顶部导航条变成半透明实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!--引入jQuery--> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <title>Js控制网页滑动的时候顶部导航条变