浮动导航

//初始化全局变量GLOBAL.onscrollY.thisy【滚动的高度】
GLOBAL.namespace(‘onscrollY‘);
GLOBAL.onscrollY.thisy=0;

$(window).resize(function(){
    GLOBAL.onscrollY.thisy = (document.body.scrollTop||document.documentElement.scrollTop);
});
$(window).scroll(function(){
    GLOBAL.onscrollY.thisy = (document.body.scrollTop||document.documentElement.scrollTop);
});
//【floatMenu】超过【Gover】时增加类【onFloat】——可用于浮动导航 

//实例调用 onFixed(‘.floatMenu‘,‘#Gover‘,‘onFloat‘);

function onFixed(floatMenu,Gover,onClass){
    this.floatMenu=$(floatMenu);
    this.Gover=$(Gover);
    this.onClass=onClass;
    $(window).scroll(function(){
        if( GLOBAL.onscrollY.thisy >this.Gover.offset().top ){
            this.floatMenu.addClass(this.onClass);
        }else{
            this.floatMenu.removeClass(this.onClass);
        }
    });
}
时间: 2024-10-15 15:22:41

浮动导航的相关文章

一些项目需要的东西整合(2)—— 浮动导航

这个东西其实理解了很好懂的,就是position:fixed的应用 例子如下: <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrapper{width:1000px;height:2000px;mar

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

Jquery 左侧浮动导航

首先看一下效果图,如图 下面正式开始: Html代码: <div id="nav"> <ul> <li><a href="">服装</a> <a href="">服装</a> <a href="">服装</a></li> <li><a href="">服装</

CSS了一个浮动导航条

绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd { margin:0; padding:0; border:0}ul,ol { list-style:none}body { background:#fff; font:12px/1.5 arial,sans-se

jQuery 浮动导航菜单(购物网站商品类型)

单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

右侧浮动导航

<div id="float" class="float"> <a>1</a> <a>2</a> </div> <style> .float{width:168px;height:294px;position:absolute;top:180px;left:254px;z-index:100;padding-top:32px;} </style> <script&g

jQuery页面滚动右侧浮动导航切换

体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"

jquery页面滚动显示浮动菜单栏锚点定位效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>jQuery

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,