如何在基于jquery的基础上实现滚动时jquery导航显示隐藏

思路：鼠标下滚动时顶部不显示，上滚动时导航显示

10年积累的成都做网站、成都网站建设、成都外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有青白江免费网站建设让你可以放心的选择与我们合作。

CSS:

body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}

#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify;height:10000px;}

/*给DIV 一个固定高度显示滚动条*/

img{float:left; margin:0 10px 10px 0;}

.yapiskan{

background-color:#e74c3c; 

color:white; 

font-size:24px; 

padding:5px; 

text-align:center; 

position: fixed; 

left:0; 

top:0; 

width:100%; 

transition: top .5s;

}

.gizle {

top: -90px;

}

.sabit {

top:0;

z-index: 9999;

}

结构：

!DOCTYPE html

html

head

meta charset="UTF-8"

titleYukar#305; Scroll Edildi#287;inde G#246;züken Header - CodePen/title

link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /

/head

body

header class="yapiskan"STICKY HEADER/header

div id="lipsum"

/div

script src="//此处引入JQ"/script

script src="//此处引入js"/script

/body

/html

//JS部分

$(function(){

var cubuk_seviye = $(document).scrollTop();

var header_yuksekligi = $('.yapiskan').outerHeight();

//卷动事件

$(window).scroll(function() {

//卷动高度

var kaydirma_cubugu = $(document).scrollTop();

//上滚动显示导航

if (kaydirma_cubugu  header_yuksekligi){$('.yapiskan').addClass('gizle');} 

else {$('.yapiskan').removeClass('gizle');}

//下滚动隐藏导航

if (kaydirma_cubugu  cubuk_seviye){$('.yapiskan').removeClass('sabit');} 

else {$('.yapiskan').addClass('sabit');}

cubuk_seviye = $(document).scrollTop();

});

});

关于jQuery导航的复选框

jquery操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

$("input:checkbox:checked").val()

或者

$("input:[type='checkbox']:checked").val();

或者

$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项

$('input:checkbox').each(function() {

if ($(this).attr('checked') ==true) {

alert($(this).val());

}

});

3、设置第一个checkbox 为选中值

$('input:checkbox:first').attr("checked",'checked');

或者

$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值

$('input:checkbox).eq(索引值).attr('checked', 'true');

索引值=0,1,2....

或者

$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox

$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值

$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox

$("input:checkbox[value='1']").remove();

9、删除第几个checkbox

$("input:checkbox").eq(索引值).remove();

索引值=0,1,2....

如删除第3个checkbox:

$("input:checkbox").eq(2).remove();

10、遍历checkbox

$('input:checkbox').each(function (index, domEle) {

//写入代码

});

11、全部选中

$('input:checkbox').each(function() {

$(this).attr('checked', true);

});

12、全部取消选择

$('input:checkbox').each(function () {

$(this).attr('checked',false);

});

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

1.给CheckBox设置一个id属性，通过id选择器选取：

input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" /

JQuery:

$("#chkOne").click(function(){});

2.给CheckBox设置一个class属性，通过类选择器选取：

input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" /

JQuery:

$(".chkTwo").click(function(){});

3.通过标签选择器和属性选择器来选取：

input type="checkbox" name="someBox" value="1" checked="checked" /

input type="checkbox" name="someBox" value="2" /

JQuery:

$("input[name='someBox']").click(function(){});

二、对CheckBox的操作：

以这段checkBox代码为例：

input type="checkbox" name="box" value="0" checked="checked" /

input type="checkbox" name="box" value="1" /

input type="checkbox" name="box" value="2" /

input type="checkbox" name="box" value="3" /

1.遍历checkbox用each()方法：

$("input[name='box']").each(function(){});

2.设置checkbox被选中用attr();方法：

$("input[name='box']").attr("checked","checked");

在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断 if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked"))

3.获取被选中的checkbox的值：

$("input[name='box'][checked]").each(function(){

if (true == $(this).attr("checked")) {

alert( $(this).attr('value') );

}

或者：

$("input[name='box']：checked").each(function(){

if (true == $(this).attr("checked")) {

alert( $(this).attr('value') );

}

$("input[name='box']：checked")与 $("input[name='box']")有何区别没试过，我试了用 $("input[name='box']")能成功。

4.获取未选中的checkbox的值：

$("input[name='box']").each(function(){

if ($(this).attr('checked') ==false) {

alert($(this).val());

}

});

5.设置checkbox的value属性的值:

$(this).attr("value",值);

三、 一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：

1. var array= new Array();

2. 往数组添加数据：

array.push($(this).val());

3.数组以“,”分隔输出：

alert(array.join(','));

用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

script type="text/javascript" src=""/script

script

(function() {

new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class

offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）

tolerance: 5, // scroll tolerance in px before state changes        

classes: {

initial: "animated",  // 当元素初始化后所设置的class

pinned: "slideUp", // 向上滚动时设置的class

unpinned: "slideDown" // 向下滚动时所设置的class

}

}).init();    

}());

/script

然后，加上样式就可以了：

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}

.animated .slideDown {top: -100px;}

.animated .slideUp {top: 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程序设计有所帮助。

文章名称：jquery导航,jquery导航栏跳转页面选中状态
链接URL：http://csdahua.cn/article/dsdjiej.html