右侧浮动导航

<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>

(function(){

var $ = function (id){return typeof(id) == ‘string‘ ? document.getElementById(id) : id;}

function getPos(eleStr){

var e = $(eleStr), t=e.offsetTop, l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

return {‘t‘:t,‘l‘:l}

}

/*窗口右边浮动条*/

var top = getPos(‘float‘).t;

function barInit(barStr, wrapW, marginLeft){

var bar = $(barStr),

cW = document.documentElement.clientWidth || document.body.clientWidth,

cH = document.documentElement.clientHeight || document.body.clientHeight,

sT = document.documentElement.scrollTop || document.body.scrollTop,

barW = bar.offsetWidth,

barH = bar.offsetHeight,

barTop,

barLeft;

barTop = 0.5*(cH - barH) + sT - top;

if(barTop < 300) barTop = 300;

if(barTop > 20000) barTop = 20000;

if((cW - wrapW) >= (barW + marginLeft) * 2){

barLeft = (cW + wrapW)*0.5 + marginLeft;

}else if(cW <= wrapW){

barLeft = wrapW - barW;

}else{

barLeft = cW - barW;

}

if(barLeft<wrapW){

barLeft = wrapW;

}

bar.style.cssText = ‘position:absolute;top:‘ + barTop + ‘px;left:‘ + barLeft + ‘px;z-index:999;‘

barScroll(bar);

}

function barScroll(bar){

var cH = document.documentElement.clientHeight || document.body.clientHeight,

barH = bar.offsetHeight,

sT = document.body.scrollTop || document.documentElement.scrollTop,

boxY = parseInt(bar.style.top);

var boxFinal, y1, timer;

if(timer) clearTimeout(timer);

boxFinal = 0.8*(cH - barH) + sT - top;

if(boxFinal < 300) boxFinal = 300;

if(boxFinal > 20000) boxFinal = 20000;

y1 = Math.ceil((boxFinal - boxY)/20);

if(y1 == 0){

timer = setTimeout(function(){barScroll(bar)}, 200)

}else{

bar.style.top = boxY + y1 + ‘px‘;

timer = setTimeout(function(){barScroll(bar)}, 20);

}

}

window.onresize = function(){

barInit(‘float‘, 844, 70);

}

window.onload = function(){

barInit(‘float‘, 1000,2);

}

})()

</script>

时间: 2024-10-14 15:04:44

右侧浮动导航的相关文章

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"

一些项目需要的东西整合(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"

大燕网北京站右侧辅助导航

今天北京下了一天的大雨,中午吃完饭,人事将我们叫到办公室,说是要开会.大家都特别紧张,还以为是最近有出什么错了呢.原来是两件事:1.发上个项目的奖金.2.宣布今天下雨早点回家(会后就可以). 回到家没事做,看腾讯新闻,把大燕网的右侧导航趴下了玩玩. 废话不多说,已经不少了,直接贴代码. <!DOCTYPE html> <head> <title>辅助导航_腾讯·大燕网北京站</title> <meta charset="utf-8"

jQuery插件PageSlide实现左右侧栏导航

jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> <scrip

浮动导航

//初始化全局变量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(){ GLOB

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