滾動時平滑顏色變化的粘性標題文本

任務是 - 爲標題中的h1標記居中（水平和垂直）添加class sticky，並將其跟蹤到第二個位置並放入「about」部分，以滾動爲例（但它是行不通的）http://codepen.io/AlexanderDolgan/pen/bEjwRP 因此，我添加粘性類（位置：固定，改變頂部：爲0，重置變換：翻譯（-50％，0））這個元素使用jQuery，當用戶啓動向下滾動頁面。滾動時平滑顏色變化的粘性標題文本

1）它現在仍然是一個平滑的改變文字顏色從白色到黑色滾動可能是使用過濾器？或者我可以創建第二個h1文本，上面有0個不透明度，如何逐漸改變它？ 2）在底部添加另一個類（綠色標題）並在其中放置文本。

http://codepen.io/AlexanderDolgan/pen/bEjwRP

<html lang="en"> 

<head> 
    <meta charset="UTF-8" /> 
    <title>Document</title> 
</head> 

<body> 
    <div class="wrapper"> 
    <!--site header --> 
    <section class="site-header"> 
     <!--company name and desc--> 
     <div class="hero-text" id="sticky"> 
     <h1 >Company name</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p> 
     </div> 
    </section> 
    <section class="about"> 
     <h2>I want to move the company name here</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod dolorum doloremque dicta iste a atque iure explicabo? Laborum, magnam?</p> 
    </section> 
    </div> 
</body> 

</html>

CSS

* { 
    box-sizing: border-box; 
} 
body { 
    min-height:1000px; 
} 

body, h1, .wrapper { 
    margin: 0; 
    padding: 0; 
} 

// site header 
.site-header { 
    background: grey; 
    height: 50vh; 
    min-height: 200px; 

    position:relative; 
} 

// company name and desc 
.hero-text { 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 

    text-align: center; 
    color: white; 
} 


.about { 
    text-align: center; 
} 
.about h2 { 
    color:green; 
} 
.about p { 
    display: block; 
    margin: 0 auto; 
    max-width: 700px; 
} 

.sticky { 
    width: 75%; 
    position: fixed; 
    top:0; 
    transform: translate(-50%,0%); 
}

$(function(){ 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#sticky').offset().top; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
      //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
      $('#sticky').addClass("sticky"); 
     } else { 
      $('#sticky').removeClass("sticky"); 
     } 
    }); 
});

感謝您的幫助！我無法解決我的第一個項目的問題。如果有人給我一個提示，那會很棒。

來源

2016-02-02 Alexander Dolgan

中的工作示例現在，您的代碼是否可以完成這項工作？如果不是，你看到的問題到底是什麼？您想做什麼？它不清楚你的問題 –

感謝您的回覆，是的部分我完成了挑戰 - 1）它現在仍然是一個平滑的改變文字顏色從白色到黑色滾動可能是使用過濾器？或者我可以創建第二個h1文本，上面有0個不透明度，如何逐漸改變它？ 2）在底部添加另一個類（綠色標題）並在其中放置文本。也許我在上班途中完成了它 –

我認爲你可以做到這一點，如下所示：

$(window).scroll(function(){ 


    if($(window).scrollTop() > stickyHeaderTop) { 
     //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
     $('#sticky').addClass("sticky"); 

     $('#sticky h1').css("color","rgb(0,0,0)"); 

    } else { 
     $('#sticky').removeClass("sticky"); 

     var colorPic = Math.round((1-$(window).scrollTop()/stickyHeaderTop)*255); 
     $('#sticky h1').css("color","rgb("+colorPic+","+colorPic+","+colorPic+")"); 
    } 
});

正在發生的事情是，我改變h1顏色使用rgb顏色標籤滾動功能。現在，我正在將顏色從white更改爲black，反之亦然，但您可以實現所需的任何顏色更改。查看CODEPEN

來源

2016-02-03 00:30:01

非常感謝，它幫助我完成了我的第一個項目。 –

滾動時平滑顏色變化的粘性標題文本

回答

相關問題