如何在基于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="http://此處引入JQ"/script

script?src="http://此處引入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選擇器選?。?/p>

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.通過標簽選擇器和屬性選擇器來選?。?/p>

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程序設計有所幫助。