滚动导航代码（滚动页面代码）

本篇文章给大家谈谈滚动导航代码，以及滚动页面代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、百百度百科右侧导航滚动代码
• 2、jQuery实现带滚动导航效果的全屏滚动相册实例
• 3、页面比较长,所以用锚点做了个导航跟随页面往下滚动,如何能让页面到达锚位置的时候,自动高亮显示呢?
• 4、JavaScript或者jQuery的代码怎么实现网页向下滚动之后顶部导航栏变窄
• 5、如何实现网页导航栏随着网页滚动下滑

百百度百科右侧导航滚动代码

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="directory-nav" id="directoryNav"ul/ulspan class="cur-tag"/spanspan class="c-top"/spanspan class="c-bottom"/spanspan class="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="l1"span class="c-dot"/span'+index1+'. a class="l1-text"'+text+'/a/li');

}else{

index2++;

temp.push('li class="l2"'+index1+'.'+index2+' a class="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，则一直显示

});

jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的图片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。

页面比较长,所以用锚点做了个导航跟随页面往下滚动,如何能让页面到达锚位置的时候,自动高亮显示呢?

$('#nav a').click(function(){

$('#nav a').removeClass("c");

$(this).addClass("c");

});

把这段代码放到JS里就行了

JavaScript或者jQuery的代码怎么实现网页向下滚动之后顶部导航栏变窄

!DOCTYPE html

html

head

meta charset="utf-8"

style

html {height:100%}

body {background:linear-gradient(red, blue)}

header {position:fixed; top:0; left:0; right:0}

header .login {height:28px; background-color:#fff; text-align:right}

header .nav {height:40px; background-color:#ddd; text-align:center}

.test {height:2000px}

/style

/head

body

headerdiv class="login"这是login部分/divdiv class="nav"这是nav部分/div/header

div class="test"/div

script

window.onscroll=function(){

   var login=document.getElementsByClassName("login")[0];

   var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;

   if(scrollTop10){

      login.style.display="block";

   }else{

      login.style.display="none";

   }

}

/script

/body

/html

如何实现网页导航栏随着网页滚动下滑

1、首先输入下方的代码：

$(window).scroll(function () {

            var $nav = $(".floatingMenu ul li"),

              length = $nav.length-1,//获取导航菜单 ul li 的个数

              item = new Array(),//新建一个数组

              sTop = $(window).scrollTop();//获取偏移的高度

          for (var i = 0; i length; i++) {

2、然后输入下方的代码：

if (i == 0) {

                  item[i + 1] = $(".blockListdiv:first-child").offset().top;

                  if (sTop = item[i + 1]) {

                       $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");//选中的样式selected

                   }

               } else {

3、然后输入下方的代码：

item[i + 1] = $(".blockListdiv:nth-child(" + (i + 1) + ")").offset().top;

                   if (sTop = item[i + 1] - 100) {

                       $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");

                  }

               }

           }

       })

4、然后就可以了。

关于滚动导航代码和滚动页面代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。