Question

我希望在用户滚动时调整标题大小，并在页面位于顶部时再次调整大小。我有这个例子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是 -

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

我遇到的问题是当我在跳跃后滚动内容时，我看不到它。我无法弄清楚我的HTML / CSS在这里做错了什么。

有什么想法吗？

编辑：

这里有一个小代码，里面有代码 - http://jsfiddle.net/rHmCu/

Answer 1

你的css

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

会导致所有内容不足，因为它是位置固定的，如果你想避免跳转并使标题停靠，那么你需要在标题后面动态地向元素添加一个边距

像这样的东西

$(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');
    }
  }
});

我还没有测试过这段代码，但它就是这样的，当然你也可以根据需要动态获得高度。

我还添加了类测试的检查，因为如果类已经存在，则不需要做额外的工作。只是一个注意事项，因为你在滚动时这样做，这可能会导致平板电脑/手机上出现问题

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

Answer 2

section没有定义的位置，因此它落后于.header所以：

section { 
    position:relative;
}

（我想）

样本：http://jsfiddle.net/pavloschris/rHmCu/3/

Answer 3

header是一个元素，但是你的CSS和jQuery选择器都试图将它作为一个类访问。删除选择器中的点。

Answer 4

我写了一个pin和element的插件，并在达到阈值时允许回调... http://drewdahlman.github.com/Pinned/

$("#element").pinned({
    bounds: 100, // when to become sticky
    scrolling: 0, // position during scroll
    mobile: false // should support mobile 
},function(){
    // PINNED
    // SHRINK YOUR ELEMENT
},
function(){
    // UNPINNED
    // EXPAND YOUR ELEMENT
});

当您向下滚动100px但是可以设置为1时会触发此操作，并且可以执行此操作。

同样来自你的小提琴 - 将你的标题设置为绝对位置，然后当更改发生时你的内容不会跳转。因为您已经定位它以考虑标题的大小和位置。

Answer 5

我设法在这里解决了一些答案，这导致了这个小提琴 -

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 0){  
    $('header').addClass("test");
    $('section').css("padding-top", "220px");
  } 
  else{
    $('header').removeClass("test");
    $('section').css("padding-top", "0px");
  }
});

http://jsfiddle.net/rHmCu/5/

非常感谢那些花时间回答并让我的大脑正在努力的人

Answer 6

一个非常简单的解决方案，只有html和css：

在body元素
让身体创建一个新的堆叠索引，例如z-index：0
small-header获取位置：fixed和z-index：1
标题获取位置：relative和z-index：2

这会将（大）标题放在前面，它仍会滚动并离开视口。

较小的标题位于后面但仍位于内容之前（z-wise）。

标题和内容一起滚动，同时固定的小标题保持在原位。可以这么简单。

Answer 7

您需要将top: 0; left: 0;规则添加到`.test＆＃39;类。它会将您的Navbar修复到网页的顶部。

Answer 8

你可以尝试这个简单的东西来调整滚动窗口上的标题。

$(document).on("scroll", function(){
		if
      ($(document).scrollTop() > 100){
		  $("header").addClass("shrink");
		}
		else
		{
			$("header").removeClass("shrink");
		}
	});

body {
  background: #eee;
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro", sans-serif;
  color: #333;
}

header {
  width: 100%;
  padding: 30px 0;
  background: #000;
  border-bottom: 1px solid #e1e1e1;
  /* animation magic */
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: fixed;
  color:#aaa;
}

header h1 {
  font-size: 30px;
  text-indent: 40px;
  font-weight: bold;
}

.container {
  width: 90%;
  margin: 180px auto;
}

.shrink {
  padding: 10px 0;
}

p {
  margin: 0 0 40px 0;
  line-height: 24px;
}

strong {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <h1>LOGO</h1>
</header>
  
<section class="container">
  <p><strong>Scroll down to see the magic in action...</strong></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
  
<p>
Sed nulla cred Banksy jean shorts. Reprehenderit mumblecore incididunt anim accusamus. Keffiyeh Cosby sweater in cornhole elit, tote bag cillum banjo. Shabby chic YOLO banh mi sunt. Artisan blog Neutra, polaroid adipisicing Banksy +1 lo-fi umami distillery fixie seitan. Semiotics artisan flannel mollit craft beer Blue Bottle. Bespoke biodiesel banh mi literally.
</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

滚动时调整标题大小

8 个答案: