Question

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

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

任何帮助表示感谢，我对javascript很新，所以我希望不是我不知道该怎么去google的情况。

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

$(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语句为真时，用户将在标题（150）的最小（0）和最大滚动点之间。为什么第一个If语句无法正常工作，因为当我使用我的触控板向上滚动时，标题会继续增长？

Answer 1

您创建了2个不同的类。常规标题的1个类，然后是粘性标题的类。使用jQuery来检测窗口的滚动位置。通常人们使用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;
}

JQUERY

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

http://jsfiddle.net/3Lj0oyL4/

您可以在webdesignerdepot.

上阅读有关此主题的教程

Answer 2

首先将标题设置为固定和100％，可能会添加z-index。

然后你需要以下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");
 }
 });

Answer 3

这可能并不完美但是我认为你想做什么以及我会这样做。如果这不正确，请原谅。

＆＃13;

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);
    }
  });
}

＆＃13;

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

＆＃13;

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

＆＃13;

随着滚动更改的动画粘贴标题

3 个答案: