添加文字陰影（jQuery的或JavaScript）

我有這樣的HTML和CSS代碼：添加文字陰影（jQuery的或JavaScript）

<div class="header"> 

</div> 

.header { 
    top:0; 
    left:0; 
    right:0; 
    width:100%; 
    background:#3b5998; 
    height:95px; 
    margin-bottom: 50px; 
position:fixed; 
}

什麼，我想在這裏做的是頭部應在固定的位置（上）只要用戶向下滾動。對於那件事我沒有任何疑問。我輕鬆完成了這項任務。

我想在用戶向下滾動時添加不同的樣式。當用戶向下滾動時，我想在它上面添加一個陰影效果，所以它看起來會提升。如果用戶向上滾動併到達網頁的頂部，它將恢復爲默認的CSS樣式（它沒有箱子陰影）。

更多像是在說：

向下滾動=激活框陰影效果

如果向上滾動，並達到了頂級=恢復

我不知道這方面的任何CSS代碼，也許有人將幫助我與他們的JavaScript/jQuery的專業知識，使一個代碼？

對不起，如果我的解釋太長或有點混亂。非常感謝你！

來源

2013-02-07 Kareen Lagasca

使用$（window）.scroll（function（）{Your code}）; – Dineshkani

您是否想要根據穩定定義的距離或當前的滾動條更改陰影？ – yckart

有一個明確的例子，你可以看看這個網站：http：//www.bendaggers.com/他的頭部固定在頂部。我試圖在這裏完成的是相同的，但是我想在用戶向下滾動頁面時在頁眉底部有一個黑盒子陰影。還要注意的是，如果用戶上升併到達頂部，則邊框的黑框陰影將消失。 –

嘗試這樣

$(window).scroll(function(){ 
if (document.body.scrollTop === 0) 
    $(".header").css({"box-shadow":"none"}); 
else 
    $(".header").css({"box-shadow":"0px 0px 1px #EEE"}); 
});

See Demo For Reference only

來源

2013-02-07 15:44:36 Dineshkani

爲什麼-1請說明理由？ – Dineshkani

$（窗口）.scroll（函數（）{ 如果（===的document.body.scrollTop 0）的box-shadow：無; 其他的box-shadow：0像素0像素1px的#EEE; }）; 是對的嗎？ –

@KareenLagasca它根據您的要求。查看更新回答 – Dineshkani

像這樣的事情？

var win = $(window), 
    doc = $(document), 
    header = $('.header'); 

win.scroll(function(e) { 
    var scrollPercent = win.scrollTop()/(doc.height() - win.height()), 
     scrollPercentRounded = (scrollPercent * 100).toFixed(2); 

    header.css({boxShadow: '0 0 ' + scrollPercentRounded + 'px #000'}); 
});

demo

來源

2013-02-07 15:53:34 yckart

會嘗試你的代碼，我的辦公室電腦真的很糟糕。 IT部門只安裝了IE8，所以箱子陰影效果不可見。但我希望你的代碼能夠工作。一直在這一部分停留一天。順便說一句，jsfiddle不工作，因爲IT部門阻止它。我不知道爲什麼，也許是因爲他們讓我的工作人員在線玩js遊戲。大聲笑感謝你的方式，我會在今天晚些時候回覆你。非常感謝你！ :) –

@KareenLagasca我會很感激你的反饋:-) – yckart

謝謝你，祝你有美好的一天！ :) –

-2

隨着this code你得到一個不錯的平穩過渡：

var $doc = $(document), 
    $target = $('.header'), 
    limit = 200, 
    shadowStyle = '0 2px 5px', 
    rgb = '0,0,0'; 

$(window).scroll(function() { 
    var top = $doc.scrollTop(); 

    if (top <= limit) { 
     var opac = 1/limit*top; 
     $target.css('box-shadow', shadowStyle+' rgba('+rgb+','+opac+')'); 
    } 
});

您可以輕鬆地修改陰影樣式和limit定義在哪個範圍應該淡入/淡出。

來源

2013-02-07 16:07:03 Simon

感謝simon的幫助:) –

添加文字陰影（jQuery的或JavaScript）

回答

相關問題