jquery滚动固定,jquery 滚动条

jquery滚动条导航栏怎么固定

其实所谓的网页滚动条固定就是一个简单的判断

function scrollLis(){

    var toTop = offs.top-$(window).scrollTop();

    if(toTop==0||toTop0){

        if(!$('.fixed-div').hasClass('add-fixed-div'))$('.fixed-div').addClass('add-fixed-div');

    }else{

        $('.fixed-div').removeClass('add-fixed-div');

    };

};

var offs=$('.fixed-div').offset();

$(window).scroll(function(){

scrollLis();

});

我解释下代码：

在你的nav class 同时加入.fixed-div

然后在css样式表中add-fixed-div写上绝对定位

scrollLis 滚到.fixed-div的时候就会添加一个add-fixed-div 而add-fixed-div他里面有一个绝对定位的css （position:fixed）这样就完成了导航固定了

在解释下

var offs=$('.fixed-div').offset();

$(window).scroll(function(){

scrollLis();

});

这个是判断回滚的时候取消固定

相关问答

Q1: jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：

一、Js代码：

onload

=

function

()

{

//初始化

scrollToLocation();

};

function

scrollToLocation()

{

var

mainContainer

=

$('#thisMainPanel'),

scrollToContainer

=

mainContainer.find('.son-panel:last');//滚动到div

id="thisMainPanel"中类名为son-panel的最后一个div处

//scrollToContainer

=

mainContainer.find('.son-panel:eq(5)');//滚动到div

id="thisMainPanel"中类名为son-panel的第六个处

//非动画效果

//mainContainer.scrollTop(

//

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

//);

//动画效果

mainContainer.animate({

scrollTop:

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

},

2000);//2秒滑动到指定位置

}

二、Html代码：

div

id="thisMainPanel"

style="height:200px;overflow-y:

scroll;border:1px

solid

#f3f3f3;"

div

class="son-panel"我是类容区域-1/div

div

class="son-panel"我是类容区域-2/div

div

class="son-panel"我是类容区域-3/div

div

class="son-panel"我是类容区域-4/div

div

class="son-panel"

style="height:160px;"我是类容区域-5/div

div

class="son-panel"我是类容区域-6/div

div

class="son-panel"我是类容区域-7/div

div

class="son-panel"我是类容区域-8/div

/div

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery

form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

Q2: jquery中左侧导航怎么能让它滚动一段距离后固定

$(window).scroll(function() {

先判断导航距离顶部的位置，满足要求之后，将他的position改成fixed, 这样就固定了。

});