類似天貓商品詳情隨瀏覽器移動(dòng)的示例代碼
更新時(shí)間:2014年02月27日 14:47:22 作者:
當(dāng)瀏覽器移動(dòng)到某個(gè)指定位置時(shí),該圖層上浮,然后加入一個(gè)樣式,讓該div層定位于瀏覽器頂部,需要的朋友可以參考下
使用該函數(shù),必須集成于jquery包
原理:當(dāng)瀏覽器移動(dòng)到某個(gè)指定位置時(shí),該圖層上浮,然后加入一個(gè)樣式,讓該div層定位于瀏覽器頂部
//控制頭部購物車的顯示
function fixshow(min_height){
min_height ? min_height = min_height : min_height = 830;
$(window).scroll(function(){
var s = $(window).scrollTop();
if( s > min_height){
$("#proBuyTip").fadeIn(100);
$(".fixtabwrap").addClass("topfixed");
}else{
$("#proBuyTip").fadeOut(200);
$(".fixtabwrap").removeClass("topfixed");
};
});
};
.topfixed {
position: fixed !important;
top: 0px;
left: 0px;
z-index: 999;
width: 100%;
background-color: white;
position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}
原理:當(dāng)瀏覽器移動(dòng)到某個(gè)指定位置時(shí),該圖層上浮,然后加入一個(gè)樣式,讓該div層定位于瀏覽器頂部
復(fù)制代碼 代碼如下:
//控制頭部購物車的顯示
function fixshow(min_height){
min_height ? min_height = min_height : min_height = 830;
$(window).scroll(function(){
var s = $(window).scrollTop();
if( s > min_height){
$("#proBuyTip").fadeIn(100);
$(".fixtabwrap").addClass("topfixed");
}else{
$("#proBuyTip").fadeOut(200);
$(".fixtabwrap").removeClass("topfixed");
};
});
};
復(fù)制代碼 代碼如下:
.topfixed {
position: fixed !important;
top: 0px;
left: 0px;
z-index: 999;
width: 100%;
background-color: white;
position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}
您可能感興趣的文章:
- Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果
- Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼
- Android時(shí)光軸實(shí)現(xiàn)淘寶物流信息瀏覽效果
- PHP實(shí)現(xiàn)采集抓取淘寶網(wǎng)單個(gè)商品信息
- JQuery實(shí)現(xiàn)的購物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
- PHP 類商品秒殺計(jì)時(shí)實(shí)現(xiàn)代碼
- asp.net下使用jQuery.AutoComplete完成仿淘寶商品搜索自動(dòng)完成功能(改進(jìn)了鍵盤上下選擇體驗(yàn))
- 基于jquery的商品展示放大鏡
- 仿當(dāng)當(dāng)網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導(dǎo)航菜單
- JAVAEE model1模型實(shí)現(xiàn)商品瀏覽記錄(去除重復(fù)的瀏覽記錄)(一)
相關(guān)文章
jQuery動(dòng)畫_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
用JavaScript手動(dòng)實(shí)現(xiàn)動(dòng)畫效果,需要編寫非常復(fù)雜的代碼。下面給分享jQuery內(nèi)置的幾種動(dòng)畫樣式,需要的朋友參考下吧2017-07-07jquery sortable的拖動(dòng)方法示例詳解
本文以示例的方式為大家介紹下jquery sortable的拖動(dòng)方法的具體實(shí)現(xiàn),感興趣的朋友可以參考下2014-01-01jQuery實(shí)現(xiàn)首頁頂部可伸縮廣告特效代碼
一套使用jQuery 插件實(shí)現(xiàn)的廣告特效代碼,其效果類似全屏廣告,打開網(wǎng)頁后在網(wǎng)頁的第一屏顯示大幅廣告,停留幾秒后慢慢伸縮至標(biāo)準(zhǔn)小圖片顯示在網(wǎng)頁預(yù)留位置上,效果非常不錯(cuò),這里推薦給大家。2015-04-04jquery 讀取頁面load get post ajax 四種方式代碼寫法
jquery 讀取頁面load get post ajax 四種方式代碼寫法,學(xué)習(xí)jquery的朋友可以參考下。2011-04-04如何實(shí)現(xiàn)星星評(píng)價(jià)(jquery.raty.js插件)
本文主要分享了用jQuery插件jquery.raty.js實(shí)現(xiàn)星星評(píng)價(jià)功能:后臺(tái)傳數(shù)據(jù),前臺(tái)顯示星星個(gè)數(shù)的具體方法。有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05