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并再次将其移动到标题元素后面来模仿您想要的效果。

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

1 个答案: