如何縮小向下滾動時的標誌大小？

Question

如果你去http://www.baycrest.org/b2btest/index2.html 當向下滾動時，我希望徽標收縮並適應白色條。這是用Javascript完成的嗎？或者只是純粹的CSS？如果你知道任何模板，那也會有很大的幫助。謝謝

Answer 1

你可以使用css transitions和javascript/jquery來實現效果。在滾動事件中添加一個新類到標題並添加樣式以使徽標縮小。例如一個演示片段。

$(document).on("scroll", function(){ 
 
\t \t if 
 
     ($(document).scrollTop() > 50){ 
 
\t \t  $("header").addClass("shrink"); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t $("header").removeClass("shrink"); 
 
\t \t } 
 
\t });

*{ 
 
margin:0px; 
 
padding:0px; 
 
} 
 
.header{ 
 
    padding:20px; 
 
    top: 0; 
 
    position: fixed; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out ; 
 
    transition:all 0.5s ease-in-out ; 
 
    z-index:999; 
 
    background:#FFF; 
 
    width:100%; 
 
    border-bottom:1px solid #ddd; 
 
} 
 
.header img{ 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out ; 
 
    transition:all 0.5s ease-in-out ; 
 
    width:75px; 
 
    height:75px; 
 
} 
 
    
 
.shrink{ 
 
    padding:10px; 
 
} 
 

 
.shrink img{ 
 
    width:50px; 
 
    height:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="header"> 
 
    <img src="http://via.placeholder.com/350x150" title="logo"> 
 
</header> 
 
    
 
<div class="container"> 
 
    <p><strong>Scroll down</strong></p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

Answer 2

您可以使用JQuery的滾動事件從頂部獲取滾動的位置。基於此，您可以將不同的CSS類應用於徽標並動態更改其大小。

$(window).on('scroll',function(event){ 
    console.log(event); 
}); 

更多here。

很好地處理滾動事件頁面標題的另一個很酷的庫是Headroom.js。你應該檢查一下。