右侧悬浮导航代码（悬浮导航\轻触返回悬浮导航）
本文目录一览：
什么是悬浮导航
悬浮导航是一种网页布局，或者APP布局方式。导航是网站和 APP 当中必不可少的组成部分，它们引导用户抵达目标，发现内容。
为了让用户能够更加方便地使用导航，许多网站和 APP 选择使用了顶部悬浮导航，无论浏览到哪里，都能轻松使用它跳转到其他地方。虽然有的用户并不喜欢这个一直占据屏幕空间的小控件，但是它确实提供了无与伦比的便捷性。
扩展资料：
悬浮导航基本代码：
//首先获取导航栏距离浏览器顶部的高度
var top = $('.bukacn_center_main').offset().top;
//开始监控滚动栏scroll
$(document).scroll(function(){
//获取当前滚动栏scroll的高度并赋值
var scrTop = $(window).scrollTop();
//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮
if(scrTop (top+10)){
$('.bukacn_center_main').addClass('js_nav')
}else{//否则清空悬浮
$('.bukacn_center_main').removeClass('js_nav')
}
})
请问谁有右侧漂浮的代码，是JS代码
我有 但是是左右2边的 你直接复制 然后放在JS文件里 lastScrollY = 0; function heartBeat(){ var diffY; if (document.documentElement document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/} //alert(diffY); percent=.1*(diffY-lastScrollY); if(percent0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px"; document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; //alert(lastScrollY); } //下面这段删除后，对联将不跟随屏幕而移动。 window.setInterval("heartBeat()",1); //-- //关闭按钮 function close_left1(){ // left1.style.visibility='hidden'; left1.style.display='none'; leftDiv.style.display='none'; } function close_right1(){ //right1.style.visibility='hidden'; right1.style.display='none'; rightDiv.style.display='none'; } //显示样式 document.writeln("style type=\"text\/css\""); document.writeln("#leftDiv,#rightDiv{width:100px;height:100px;background-color:#fff;position:absolute;}"); document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}"); document.writeln("\/style"); //以下为主要内容 document.writeln("div id=\"leftDiv\" style=\"top:40px;left:5px\""); //------左侧各块开始 //---L1 document.writeln("div id=\"left1\" class=\"itemFloat\""); document.writeln("a href='freecalls_business.aspx'img src=images\\index_ad_3_min.jpg width=100 height=300 //a"); document.writeln("bra href=\"javascript:close_left1();\" title=\"关闭广告\"×\/abrbrbrbr"); document.writeln("\/div"); //------左侧各块结束 document.writeln("\/div"); document.writeln("div id=\"rightDiv\" style=\"top:40px;right:5px\""); //------右侧各块结束 //---R1 document.writeln("div id=\"right1\" class=\"itemFloat\""); document.writeln("a href='huodong_kaixue.html'img src=images\\index_ad_4_min.jpg width=100 height=300 //a"); document.writeln("bra href=\"javascript:close_right1();\" title=\"关闭广告\"×\/abrbrbrbr"); document.writeln("\/div"); //------右侧各块结束 document.writeln("\/div");
记得采纳啊
右侧固定悬浮代码怎么做
代码如下：
body
img src='d:\10.jpg' id=ad style='position:absolute'
script
B=document.body
with(ad)
{
width=300/*宽*/
height=400/*高*/
}
setInterval("move('ad',B.clientHeight+B.scrollTop-400/*上*/,B.clientWidth+B.scrollLeft-300/*左*/,10/*延时*/)",1)
function move(id,y,x,num)
{
with(B){t=y;l=x}
v=document.getElementById(id).style
v.posTop+=(t-v.posTop)/num
v.posLeft+=(l-v.posLeft)/num
}
/script
/body
百百度百科右侧导航滚动代码
function DirectoryNav($h,config){
this.opts = $.extend(true,{
scrollThreshold:0.5, //滚动检测阀值 0.5在浏览器窗口中间部位
scrollSpeed:700, //滚动到指定位置的动画时间
scrollTopBorder:500, //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
easing: 'swing', //不解释
delayDetection:200, //延时检测，避免滚动的时候检测过于频繁
scrollChange:function(){}
},config);
this.$win = $(window);
this.$h = $h;
this.$pageNavList = "";
this.$pageNavListLis ="";
this.$curTag = "";
this.$pageNavListLiH = "";
this.offArr = [];
this.curIndex = 0;
this.scrollIng = false;
this.init();
}
DirectoryNav.prototype = {
init:function(){
this.make();
this.setArr();
this.bindEvent();
},
make:function(){
//生成导航目录结构,这是根据需求自己生成的。如果你直接在页面中输出一个结构那也挺好不用 搞js
$("body").append('div class="a0a0-184d-2f08-7781 directory-nav" id="directoryNav"ul/ulspan class="184d-2f08-7781-1212 cur-tag"/spanspan class="2f08-7781-1212-ef73 c-top"/spanspan class="7781-1212-ef73-0a63 c-bottom"/spanspan class="1212-ef73-0a63-901b line"/span/div');
var $hs = this.$h,
$directoryNav = $("#directoryNav"),
temp = [],
index1 = 0,
index2 = 0;
$hs.each(function(index){
var $this = $(this),
text = $this.text();
if(this.tagName.toLowerCase()=='h2'){
index1++;
if(index1%2==0) index2 = 0;
temp.push('li class="ef73-0a63-901b-09ae l1"span class="0a63-901b-09ae-ef1c c-dot"/span'+index1+'. a class="901b-09ae-ef1c-9a97 l1-text"'+text+'/a/li');
}else{
index2++;
temp.push('li class="09ae-ef1c-9a97-75d2 l2"'+index1+'.'+index2+' a class="ef1c-9a97-75d2-dba1 l2-text"'+text+'/a/li');
}
});
$directoryNav.find("ul").html(temp.join(""));
//设置变量
this.$pageNavList = $directoryNav;
this.$pageNavListLis = this.$pageNavList.find("li");
this.$curTag = this.$pageNavList.find(".cur-tag");
this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();
if(!this.opts.scrollTopBorder){
this.$pageNavList.show();
}
},
setArr:function(){
var This = this;
this.$h.each(function(){
var $this = $(this),
offT = Math.round($this.offset().top);
This.offArr.push(offT);
});
},
posTag:function(top){
this.$curTag.css({top:top+'px'});
},
ifPos:function(st){
var offArr = this.offArr;
//console.log(st);
var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);
for(var i=0;ioffArr.length;i++){
if((offArr[i] - windowHeight) st) {
var $curLi = this.$pageNavListLis.eq(i),
tagTop = $curLi.position().top;
$curLi.addClass("cur").siblings("li").removeClass("cur");
this.curIndex = i;
this.posTag(tagTop+this.$pageNavListLiH*0.5);
//this.curIndex = this.$pageNavListLis.filter(".cur").index();
this.opts.scrollChange.call(this);
}
}
},
bindEvent:function(){
var This = this,
show = false,
timer = 0;
this.$win.on("scroll",function(){
var $this = $(this);
clearTimeout(timer);
timer = setTimeout(function(){
This.scrollIng = true;
if($this.scrollTop()This.opts.scrollTopBorder){
if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();
if(!show){
This.$pageNavList.fadeIn();
show = true;
}
This.ifPos( $(this).scrollTop() );
}else{
if(show){
This.$pageNavList.fadeOut();
show = false;
}
}
},This.opts.delayDetection);
});
this.$pageNavList.on("click","li",function(){
var $this = $(this),
index = $this.index();
This.scrollTo(This.offArr[index]);
})
},
scrollTo: function(offset,callback) {
var This = this;
$('html,body').animate({
scrollTop: offset
}, this.opts.scrollSpeed, this.opts.easing, function(){
This.scrollIng = false;
//修正弹两次回调 蛋疼
callback this.tagName.toLowerCase()=='body' callback();
});
}
};
//实例化
var directoryNav = new DirectoryNav($("h2,h3"),{
scrollTopBorder:0 //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
});
HTML点击按钮弹出右侧导航条代码
要把蓝色的框绝对定位，用position: absolute;就不会四分五裂的图片了
