類似天貓商品詳情隨瀏覽器移動的示例代碼
更新時間:2014年02月27日 14:47:22 作者:
當瀏覽器移動到某個指定位置時,該圖層上浮,然后加入一個樣式,讓該div層定位于瀏覽器頂部,需要的朋友可以參考下
使用該函數(shù),必須集成于jquery包
原理:當瀏覽器移動到某個指定位置時,該圖層上浮,然后加入一個樣式,讓該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));
}
原理:當瀏覽器移動到某個指定位置時,該圖層上浮,然后加入一個樣式,讓該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));
}
您可能感興趣的文章:
- Android仿淘寶商品瀏覽界面圖片滾動效果
- Jquery 最近瀏覽過的商品的功能實現(xiàn)代碼
- Android時光軸實現(xiàn)淘寶物流信息瀏覽效果
- PHP實現(xiàn)采集抓取淘寶網(wǎng)單個商品信息
- JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格)
- PHP 類商品秒殺計時實現(xiàn)代碼
- asp.net下使用jQuery.AutoComplete完成仿淘寶商品搜索自動完成功能(改進了鍵盤上下選擇體驗)
- 基于jquery的商品展示放大鏡
- 仿當當網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導航菜單
- JAVAEE model1模型實現(xiàn)商品瀏覽記錄(去除重復的瀏覽記錄)(一)
相關(guān)文章
jQuery動畫_動力節(jié)點節(jié)點Java學院整理
用JavaScript手動實現(xiàn)動畫效果,需要編寫非常復雜的代碼。下面給分享jQuery內(nèi)置的幾種動畫樣式,需要的朋友參考下吧2017-07-07jquery 讀取頁面load get post ajax 四種方式代碼寫法
jquery 讀取頁面load get post ajax 四種方式代碼寫法,學習jquery的朋友可以參考下。2011-04-04如何實現(xiàn)星星評價(jquery.raty.js插件)
本文主要分享了用jQuery插件jquery.raty.js實現(xiàn)星星評價功能:后臺傳數(shù)據(jù),前臺顯示星星個數(shù)的具體方法。有很好的參考價值,需要的朋友一起來看下吧2016-12-12jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)input輸入框獲取焦點與失去焦點時提示的消失與顯示功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05