Question

我正在尝试创建一个标题，当您向下滚动时缓慢折叠到导航栏（标题的高度随着向下滚动而减小，直到它达到70px的高度，当它变得粘到顶部时屏幕）。
我已经设法实现了这个目标，但是它非常小问题，它可能不是处理它的“最干净”方式......这就是我所做的：http://www.stroba.uk。
正如你所看到的，它非常小巧而且根本不光滑。我还创建了一个简化的jsfiddle，我想要做的是：http://jsfiddle.net/uvwusfy2/ 有谁知道我怎么能解决这个“毛刺”？无论是采用不同的方式还是改进我的做法？

如果我这样做的方式让你感到困惑，这里有一个解释：

HTML

<div class="Container">
    <div class="space"></div>
    <div class="header">
        This is the header that should turn into a nav bar as you scroll down to where it has a height of 70px
    </div>
    <div class="content">
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
    </div>
</div>

这里我创建了标题，内容和空格div，稍后我将使用jQuery填充它。

CSS

div.Container {
color:white;
font-family:arial;
}
div.space {
    width:100%
    height:0px;
}
div.header {
    height:300px;
    width:100%;
    background: linear-gradient(
      to bottom,
      #5d9634,
      #5d9634 50%,
      #538c2b 50%,
      #538c2b
    );
    background-size: 100% 20px;
}
div.header nav {
    position:absolute;
    bottom:0;
    right:0;
}
div.content {
    height: 1500px;
    background-color:blue;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}

的jQuery

$(function() {
    var initialHeaderHeight = $("div.header").height();
    $(window).scroll(function(event) {
        var st = $(window).scrollTop();
        var headerHeight = $("div.header").height();
        if (st < initialHeaderHeight - 70) {
            $("div.header").height(initialHeaderHeight - $(window).scrollTop());
            $("div.space").height($(window).scrollTop());
            $("div.header").css("position", "relative");
            $("div.content").css("top", "0");
        } else {
            $("div.header").css("position", "fixed");
            $("div.header").css("top", "0");
            $("div.content").css("top", "70px");
        }
    })
});

在这里，我这样做，以便当用户向下滚动页面时，标题变小，“space”div变得更大，并占用用户向下滚动之前标题占用的空间，因此看起来似乎像内容向上滚动，标题变小。
对不起，这可能很难理解，但我只是想知道是否有任何方法可以改进代码，以便向下滚动页面的过程更顺畅，更少出现故障。

Answer 1

作为一般规则，您希望尽可能少地进行jQuery调用，以避免性能瓶颈。

每次$(window).scroll事件触发时，您的代码都会重复执行DOM查找 - 这在用户滚动时经常发生。每次进行jQuery函数调用时，比如$('div.header')，jQuery必须查找整个文档以检索元素（div.header）。这是一个缓慢的步骤，需要在修改元素的CSS属性之前完成。

要优化代码，请在DOM加载，存储它们并在动画调用中使用它们时，一次检索对.header，.space和.content元素的引用。您可以在下面看到这个和其他一些优化：

$(function () {
    // retrieve and store header, space and content:
    var $header = $('div.header'),
        $space = $('div.space'),
        $content = $('div.content'),
        initialHeaderHeight = $header.height(),
        // declare variables to use in the event handler,
        // to avoid redeclaring them at every call:
        st,
        headerHeight;

    $(window).scroll(function (event) {
        st = $(window).scrollTop();
        headerHeight = $header.height();
        if (st < initialHeaderHeight - 70) {
            // reuse the $space, $header, $content, and st values, 
            // to avoid repeated $("") and $(window).scrollTop() calls:
            $header.height(initialHeaderHeight - st);
            $space.height(st);
            $header.css("position", "relative");
            $content.css("top", "0");
        } else {
            // reuse $header and $content to avoid
            // repeated $("") calls, and
            // use alternative .css() syntax to eliminate
            // additional .css() call on $header:
            $header.css({
                position: "fixed",
                top: 0
            });
            $content.css("top", "70px");
        }
    });
});

<强>更新

进一步改进是让.header始终锚定在视口的顶部，根据滚动值调整其高度，并仅使用.space元素定位{{1}滚动时。

首先，给你的标题定位：

.content

接下来，当页面加载时，将spacer元素的高度设置为标题的初始高度。当用户滚动时，spacer会以您需要的方式定位内容元素：

div.header {
    position: fixed;
    top: 0;
}

最后，根据当前滚动位置更新标题的高度：

$space.height(initialHeaderHeight);

Updated Fiddle

Answer 2

只需在transition添加适当的CSS规则，如下所示：

<强> FIDDLE DEMO

div.header {
    height:300px;
    width:100%;
    background: linear-gradient(
      to bottom,
      #5d9634,
      #5d9634 50%,
      #538c2b 50%,
      #538c2b
    );
    transition: height 500ms; //Add this line
    background-size: 100% 20px;
}

希望这是你所期待的。

如何修复一个崩溃的标题折叠到导航栏

2 个答案: