滾動(dòng)效果,相信大家已經(jīng)見過太多,無外乎就是加載一個(gè)js特效。開始之前為大家介紹一下側(cè)邊欄的構(gòu)成部分,因?yàn)楸疚牟捎胘s特效可以具體到側(cè)邊欄某模板(比方說A)到達(dá)頂部時(shí),指定模塊(比方說B)開始隨頁面滑動(dòng)。側(cè)邊欄是怎么樣的構(gòu)造側(cè)邊欄可以通過小工具或者自行編輯sidebar.php代碼來完成,模塊布局靈活,一般包括近期文章,近期評(píng)論,標(biāo)簽云等等等。下面就是一個(gè)常見的側(cè)邊欄結(jié)構(gòu),模塊id是我自行編寫的,方便大家辨識(shí)。divid="sidebar"divclass="recentposts".../div//近期文章 divclass="hotposts".../div//熱門文章 divclass="tagcloud".../div//標(biāo)簽云 divclass="recentcomments".../div//近期評(píng)論 divclass="blogroll".../div//連接表 /div上面就是一個(gè)簡單的側(cè)邊欄構(gòu)造,注各個(gè)模塊的id,在下一步滾動(dòng)代碼中將得到對(duì)應(yīng)。如何讓側(cè)邊欄滾動(dòng)起來下面就以熱門文章、標(biāo)簽云兩個(gè)相鄰模塊作為指定滾動(dòng)模塊,來說明指定模塊如何實(shí)現(xiàn)隨窗口滑動(dòng)。varrollStart = $('.recentcomments'), //近期評(píng)論模塊到達(dá)瀏覽器頂部時(shí),指定模塊開始滾動(dòng)rollOut = $('.recentcomments,.blogroll'); //近期評(píng)論以下模塊隱藏包括最新評(píng)論,指定模塊顯現(xiàn)rollStart.before('div class="rollbox"/div'); //這個(gè)可以不用修改,與下面保持一致varoffset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(), rollSet = $('.hotposts,.tagcloud'); //指定滾動(dòng)的模塊idobjWindow.scroll(function() { if (objWindow.scrollTop() offset.top){ if(rollBox.html(null)){ rollSet.clone().prependTo('.rollbox');//注意與上面的保持一直,不用做修改。 } rollOut.fadeOut(); rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400); } else { rollOut.fadeIn(); rollBox.hide().stop().animate({marginTop:0},400); } });你可以將其粘貼到主題js文件中,也可以用script type="text/javascript".../script將其括起來放置到header頭文件中。代碼說明:隨著網(wǎng)頁滾動(dòng)條的滑動(dòng),當(dāng)近期評(píng)論模塊到達(dá)瀏覽器頂部,近期評(píng)論以下的模塊包括近期評(píng)論隱藏消失,指定模塊熱門文章和標(biāo)簽云隨即顯示,開始隨窗口滾動(dòng)。此處代碼以最新評(píng)論模塊為臨界點(diǎn),過了此臨界點(diǎn)指定模塊顯現(xiàn)開始滾動(dòng)。代碼中模塊的id一定要和側(cè)邊欄sidebar.php模塊的id保持一致。請(qǐng)結(jié)合代碼中的說明理解。注明:指定滾動(dòng)模塊整體高度不要超過瀏覽器視窗的高度,否者會(huì)無限向下延伸。好了,就這樣吧。0
我們提供的服務(wù)有:成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、舟山ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的舟山網(wǎng)站制作公司
從SEO角度來看,不建議在面包屑導(dǎo)航上加這樣的效果。再說這樣加的話,內(nèi)頁的結(jié)構(gòu)可能會(huì)造成錯(cuò)位。
引用大神回答如下,希望可以幫到你:
(function() {
var stepSize = 200, //每滾動(dòng)一格鼠標(biāo),移動(dòng)多少距離
doc = document.documentElement,
body = document.body,
docWidth = doc.clientWidth,
scrollLeft = -1,
ready = false;
//添加鼠標(biāo)滾輪事件
if (document.addEventListener) {
document.addEventListener('mousewheel', scroll, false);
document.addEventListener('DOMMouseScroll', scroll, false); //針對(duì)firefox
} else {
document.attachEvent('onmousewheel',scroll) //針對(duì)老ie瀏覽器
}
//處理mousewheel事件的信息
function scroll (event) {
//第一次滾動(dòng)需要獲取當(dāng)前滾動(dòng)位置
if (!ready) {
scrollLeft = doc.scrollLeft + body.scrollLeft;
ready = true;
}
//firefox用detail反映滾動(dòng)方向,而且方向和其他瀏覽器相反。其他瀏覽器用wheelDelta
var direction = event.wheelDelta || -event.detail;
//保證滾動(dòng)到頭的時(shí)候不再調(diào)用update函數(shù)
if (scrollLeft = 0 direction 0) {
return;
}
if (scrollLeft = docWidth direction 0) {
return;
}
//根據(jù)鼠標(biāo)滾動(dòng)的方向確定是往左還是往右移動(dòng)
var distance = direction 0? -stepSize : stepSize;
update(distance);
}
//滾動(dòng)
function update (distance) {
scrollLeft += distance;
doc.scrollLeft = scrollLeft;
body.scrollLeft = scrollLeft; //針對(duì)webkit瀏覽器
}
})();
css里必須有這樣一條:
html, body {
height: 100%;
}