如何缩小向下滚动时的标志大小？

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。你应该检查一下。