在滚动时调整大小标题 [英] resize header on scroll

问题描述

我想在用户滚动页面时调整标题大小，当页面位于顶部时，重新调整其大小。我有这个例子HTML

I want to resize the header when the user scrolls and resize it again when the page is at the top. I have this example HTML

<header class="header">
</header>
<section>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>

此CSS

* { margin: 0; padding: 0; }

body {
  height: 1000px;
}

.header {
   width: 100%;
  height: 200px;
  background: red;
  position: relative;
  -webkit-transition: linear .3s;
     -moz-transition: linear .3s;
      -ms-transition: linear .3s;
       -o-transition: linear .3s;
          transition: linear .3s;
}

.test {
  height: 120px;
  position: fixed;
}

我的jQuery是 -

and my jQuery is -

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

我遇到的问题是当我滚动的内容后面的跳跃，看见。我无法找出我的HTML / CSS在这里做错了。

the problem I have is when I scroll the content in the jumps up behind the and I can't see it. I can't work out what my HTML/CSS is doing wrong here.

任何想法？

：

这里有一个小jsfiddle其中的代码 - http： //jsfiddle.net/rHmCu/

here's a little jsfiddle with the code in it - http://jsfiddle.net/rHmCu/

推荐答案

您的css

.test {
  height: 120px;
  position: fixed;
}

会使所有内容进入其中，因为它是位置固定的，if你想要避免跳转和标题栏，然后你需要动态添加一个边框顶部到元素的标题之后

will cause all content to go underneathe it, since it is position fixed, if you want to avoid the jump and have the header dock, then you need to dynamically add a margin top to the element right after your header

这样的东西

$(window).scroll(function(){ 
  var $header = $('.header');
  if ($(this).scrollTop() > 10){      
    if(!$header.hasClass('test')) {
        $header.addClass("test");
        $header.next().css('margin-top','120px');
    }
  } 
  else{
    if($header.hasClass('test')) {
        $header.removeClass("test");
        $header.next().css('margin-top','0');
    }
  }
});

我没有测试这个代码，但它是这样的，当然你也可以获得高度动态如果需要的话。

I have not tested this code but it's something like that, of course you could also get the height dynamically if needed.

我还添加了类测试的检查，因为如果类已经存在，你不需要做额外的工作。只是一个注意，因为你这样做滚动，这是可能的，这是因为平板电脑/手机上的口吃

I also added the checking for the class test because you don't need to do extra work if the class is already there. Just a note, since you are doing this on scroll, it is possible this cause stuttering on tablet/phones

这将有助于，如果你把它放在小提琴或至少说明最终目标。我的答案是假设你想要一个停靠标题，并避免跳转时，标题停靠

It would help if you put it in a fiddle or at least state the final goal. My answer is assuming you want a dockable header and to avoid the jump when the header docks

这篇关于在滚动时调整大小标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！