动画元素通过滚动使其更宽更高

Question

我想让我的页面的标题（类标题）在您滚动经过它时在屏幕顶部显示为一个条形（类 scrollToTop）。现在，我使用的代码在传递标题时会出现条形图（带有背景颜色的无文本链接），但我想让它在滚动标题时慢慢出现。澄清一下，它会在标题到达屏幕顶部时开始出现（标题的宽度和最小高度），并在标题完全离开屏幕后结束出现（最终高度和 100% 宽度）。我也希望它在向上滚动时执行相反的操作。

这是我的代码：

<a href="#top" class="scrollToTop"></a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var startY = $('.title').position().top + $('.title').outerHeight();
            $(window).scroll(function(){
                checkY();
            });

            function checkY(){
                if( $(window).scrollTop() > startY ){
                    $('.scrollToTop').slideDown();
                }else{
                    $('.scrollToTop').slideUp();
                }
            }
            checkY();
        });
    </script>

谢谢，如果您需要更多信息，请告诉我。

Answer 1

类似http://jsfiddle.net/pH7u5/ 的东西？基本思路是将“无文本栏链接”放在标题下方，并使用 CSS 固定到顶部：

.title {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  /* style options here */
}

.scrollToTop {
  position: fixed;
  display: block;
  z-index: 1;
  /* style options here */
}

当标题滚动过去时，会显示“无文本栏链接”，但它位于标题下方：

$(window).scroll(function(){
    var offset = $(".title").offset();
    var posY = offset.top - $(window).scrollTop();
    $(".scrollToTop").css("visibility", posY <= 0 ? "visible" : "hidden");
}).trigger("scroll");

只有当标题离开屏幕足够远时，链接才会变得可见，看起来好像标题被缩小到那个高度。 JSFiddle 包含用于注释的 CSS，因此您可以更轻松地了解其工作原理。

如果您需要更复杂的处理，我建议您先查看Scroll to Fixed。您应该能够通过将其应用于.scrollToTop 并再次将其移到标题元素后面来模仿您想要的效果。