动画粘性标题，随滚动变化

Animated sticky header that changes WITH scroll

本文关键字：滚动 变化 标题 动画      更新时间：2023-09-26

我一直在尝试像数百个其他网站一样制作一个动画粘性标题。不同之处在于，我希望动画随着滚动移动，而不是在经过某个滚动点后，捕捉到新的大小。

我正在尝试做的一个例子是在这个网站上：http://www.kriesi.at/themes/enfold/

任何帮助感谢，我对javascript很陌生，所以我希望这不是我不知道谷歌什么的情况。

编辑：这是我到目前为止所拥有的（修复了我问题的主要部分）

$(function () {
    $(window).scroll(function () {
        var scroll = getCurrentScroll();
        var progress = ((scroll * 145) / 100);
        var prog = document.getElementById("prog");
        prog.innerHTML = scroll + "px " + progress + "%";
        header = document.getElementById('header');
        if (progress < 5) {
            header.style.height = 145 + "px";
        }
        if (progress > 5 || progress < 100) {
            header.style.height = (145 - progress + (scroll / 2)) + "px";
        }
        if (progress >= 100) {
            header.style.height = 75 + "px";
            header.style.opacity = 0.8;
        }
    });
    function getCurrentScroll() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }
});

当中间的 if 语句为 true 时，用户将介于标头的最小 （0） 和最大滚动点 （150） 之间。为什么第一个 If 语句不起作用，因为当我使用触控板向上滚动时，标题会继续增长？

您创建 2 个不同的类。 1 个类用于常规标头，然后一个类用于粘性标头。使用 jQuery for 正在检测窗口的滚动位置。通常人们使用 css3 过渡来制作动画，但只是将其留给快速更改。

.HTML

<header>Sticky Header</header>

.CSS

header {
    position: fixed;
    width: 100%;
    text-align: center;
    font-size: 72px;
    line-height: 108px;
    height: 108px;
    background: #335C7D;
    color: #fff;
    font-family:'PT Sans', sans-serif;
}
header.sticky {
    font-size: 24px;
    line-height: 12px;
    height: 48px;
    background: #efc47D;
    text-align: left;
    padding-left: 20px;
}

简讯

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('header').addClass("sticky");
    } else {
        $('header').removeClass("sticky");
    }
});

http://jsfiddle.net/3Lj0oyL4/

您可以在webdesignerdepot上阅读有关此主题的教程。

首先将标题设置为 fixed 和 100%，可能添加 z 索引。

然后您将需要以下 CSS

.header{
    position:fixed;
    width:100%;
    height:100px;
    z-index:9999; //only if you need the header on top of everything
}
.header.shorty{
    height:50px;
}

然后，我们可以在页面滚动后添加短调用。

 $(window).scroll(function(){
 if($(window).scrollTop() > 100){
    $(".header").addClass("shorty");
 }else{
     $(".header").removeClass("shorty");
 }
 });

这可能并不完美，但这是我认为你想做的事情和我会做的方式。如果这是不正确的，请原谅。

window.onload = function() {
  $("#everything").scroll(function() {
    var startAt = 40; //How many pixles scrolled to start effect, 0 would match link
    if ($("#everything").scrollTop() >= startAt) {
      var scroll = $("#everything").scrollTop(),
        total = 0, // go to this value
        distance = 40, //distance to shrink
        value = (scroll < distance) ? total : total + (distance - (scroll - startAt));
      $("#head").css("height", value); //change #head to what ever you want to shrink
    } else {
      $("#head").css("background-color", value);
    }
  });
}
html,
body {
  overflow: hidden;
  /* Disables regular scrolling */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#everything {
  overflow: scroll;
  /* enables content to scroll */
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 40px;
}
#head {
  width: 100%;
  height: 40px;
  background-color: red;
  position: fixed;
  top: 0px;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="everything">
    <div id="head">header</div>
    <span>
Text Following text is so the page can scroll: <br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta velit eu turpis imperdiet congue. Morbi nec mi ipsum. Nam eu nunc in lorem sagittis feugiat a quis nisl. Donec suscipit leo quis magna egestas, id convallis leo gravida. Curabitur finibus lectus ut metus feugiat, eu tincidunt eros tempor. Fusce facilisis nunc vulputate, posuere velit nec, ultrices diam. Vestibulum aliquam velit in lectus imperdiet, vitae condimentum lectus finibus. Aliquam ac arcu eget velit molestie rhoncus. Etiam rhoncus, tellus nec lacinia porta, diam lorem ultrices sem, et dignissim ipsum augue non augue. Suspendisse tincidunt felis sit amet orci accumsan, at ornare tellus viverra. Nam viverra nulla in urna elementum ornare.Sed interdum nisi libero, id porta turpis consectetur vitae. Curabitur nunc ex, interdum eget hendrerit maximus, faucibus non est. Etiam scelerisque condimentum eleifend. Integer ac ligula eget magna porta tristique at eu neque. Sed venenatis ipsum non metus sodales finibus. Suspendisse nec nunc lobortis ligula venenatis tristique. Suspendisse aliquam leo elit, et pretium ipsum tempor sed. Maecenas tincidunt dictum leo sit amet accumsan. Nullam eu viverra nulla. Aenean vehicula tellus a mauris malesuada interdum. Sed libero lacus, consectetur at condimentum vel, egestas vitae nisl.Mauris facilisis tincidunt magna, at gravida elit. Cras molestie eros sed tincidunt ultricies. Pellentesque eleifend egestas orci, sit amet condimentum nisl semper eleifend. Sed ipsum elit, aliquet nec lacinia a, maximus eu dolor. Quisque finibus efficitur odio gravida convallis. Vivamus nec velit in est ornare luctus at a risus. In hac habitasse platea dictumst. Proin condimentum eget est non posuere. Vivamus ante quam, bibendum in tincidunt ut, egestas sed mauris. Nunc non interdum nibh, nec ornare tellus. In interdum elit nisi, a interdum est tempor id. Cras a elit ut purus ornare mollis sit amet ut est. Cras ut ex sed neque lacinia accumsan quis aliquet turpis. Quisque nisl nunc, pretium sed lectus pretium, lacinia ornare magna. Curabitur sit amet felis turpis. Morbi nisi mi, mattis quis tempor ut, accumsan nec ex.
      </span>
  </div>
</body>
</html>

相关文章：