更改CSS滾動

後，我有一個導航欄，我用一些CSS代碼不透明度：更改CSS滾動

background-color: #4b5253; 
opacity: 0.8; 
filter: alpha(opacity=80);

所有我需要的是，用戶向下滾動例如500像素之後，不透明度必須改爲1.0。

我嘗試了一些jQuery代碼，但沒有得到答案。另外我真的很難與Java一起工作，有時我不知道應該在哪裏放置我的j代碼！因此，如果有CSS來完成這一切，那將會很棒！如果沒有，請注意多一點關於Java :)

例如去：hulu.com

來源

2015-02-08 HessamMT

來完成你想要做的是一些簡單的JavaScript的組合最簡單的方法（jQuery的動力在這種情況下）和CSS3轉換。

我們將使用JS檢查每個滾動事件的窗口滾動位置，並將其與#main元素底部的距離進行比較 - 如果滾動位置更大，則我們將應用類到表明我們已經滾動過去#main的正文，然後我們將使用CSS爲該「狀態」定義導航樣式。

所以，我們的基本標記：

<nav class="nav"> 
    <a href="#" class="logo">[logo]</a> 
</nav> 
<div id="main">#main</div> 
<div id="below-main">#below-main</div>

而我們的javascript：

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable 
var mainbottom = $('#main').offset().top + $('#main').height(); 

// on scroll, 
$(window).on('scroll',function(){ 

    // we round here to reduce a little workload 
    stop = Math.round($(window).scrollTop()); 
    if (stop > mainbottom) { 
     $('.nav').addClass('past-main'); 
    } else { 
     $('.nav').removeClass('past-main'); 
    } 

});

而且，我們的風格：

.nav { 
    background-color:transparent; 
    color:#fff; 
    transition: all 0.25s ease; 
    position:fixed; 
    top:0; 
    width:100%; 
    background-color:#ccc; 
    padding:1em 0; 
    /* make sure to add vendor prefixes here */ 
} 

.nav.past-main { 
    background-color:#fff; 
    color:#444; 
} 

#main { 
    height:500px; 
    background-color:red; 
} 

#below-main { 
    height:1000px; 
    background-color:#eee; 
}

上Codepen工作的示例：http://codepen.io/taylorleejones/pen/KJsvz

在Whiteboard網站上，我們也使用了一些滾動節流和一些更復雜的樣式語義，但這是它的要點。

更改CSS代碼，以便它改變的不透明度時，它的「過去-爲主。

來源

2015-02-08 08:49:44 Crezzur

如果你是找一個本地的解決方案，然後用這個代替

function changeCss() { 
     var bodyElement = document.querySelector("body"); 
     this.scrollY > 500 ? bodyElement.style.opacity = .8 : bodyElement.style.opacity = 1; 
    } 

window.addEventListener("scroll", changeCss , false);

這裏有一個現場演示

function changeCss() { 
 
    var bodyElement = document.querySelector("body"); 
 
    this.scrollY > 500 ? bodyElement.style.opacity = .8 : bodyElement.style.opacity = 1; 
 
} 
 

 
window.addEventListener("scroll", changeCss , false);

body{background-color: #4b5253;height: 1000vh}

來源

2015-02-08 09:11:07

我發現THI s解決方案：

我寫了兩個css代碼（例如一個& b）。在「一個」不透明度爲0.8，並在「B」爲1.0，所以使用jQuery我只是在我的事件改變了CSS類：

$(window).scroll(function() { 
    var $heightScrolled = $(window).scrollTop(); 
    var $defaultHeight = 500; 

    if ($heightScrolled < $defaultHeight) 
    { 
     $('#mynav').removeClass("b") 
    $('#mynav').addClass("a") 
     } 
    else { 
     $('#mynav').addClass("b") 
     } 

});

感謝ü所有:)

來源

2015-02-09 05:30:56 HessamMT

更改CSS滾動

回答

相關問題