Question

如果你去http://www.baycrest.org/b2btest/index2.html 向下滚动时，我希望徽标缩小并放入白色条形图。这是用Javascript完成的吗？还是纯粹的CSS？如果您知道任何模板，那也会有很大帮助。感谢

Answer 1

您可以使用css过渡和javascript / jquery来实现效果。在滚动事件中，向标题中添加一个新类，并为徽标添加样式以缩小。例如，一个演示片段。

＆＃13;

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

＆＃13;

*{
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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用JQuery的滚动事件从顶部获取滚动的位置。基于此，您可以将不同的CSS类应用于徽标并动态更改其大小。

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

了解更多here。

另一个很酷的库，可以很好地处理滚动事件的页眉，Headroom.js。你应该看看它。

如何在向下滚动时缩小徽标大小？

2 个答案: