0

我想在用户滚动时调整标题的大小，并在页面位于顶部时再次调整标题的大小。我有这个示例 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 在这里做错了什么。

有任何想法吗？

编辑：

这是一个带有代码的小jsfiddle - http://jsfiddle.net/rHmCu/

4

8 回答 8

1

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

section { 
    position:relative;
}

（ 我想 ）

演示：http: //jsfiddle.net/pavloschris/rHmCu/3/

于 2013-03-21T17:05:14.887 回答
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');
    }
  }
});

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

我还添加了对类测试的检查，因为如果类已经存在，您不需要做额外的工作。请注意，由于您是在滚动上执行此操作，因此这可能会导致平板电脑/手机上的卡顿

如果您将其放在小提琴中或至少说明最终目标会有所帮助。我的回答是假设您想要一个可停靠的标题并避免标题停靠时的跳转

于 2013-03-21T16:22:29.733 回答
0

我写了一个插件和元素，并在达到阈值时允许回调...... 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 并且应该可以解决问题。

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

于 2013-03-21T16:19:13.253 回答
0

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

于 2013-03-21T16:18:04.847 回答
0

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

$(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/

非常感谢所有花时间回答并让我的大脑为此工作的人

于 2013-03-21T18:03:49.110 回答
0

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

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

于 2018-05-23T05:11:17.893 回答
0

您需要将top: 0; left: 0;规则添加到“.test”类。它会将您的导航栏固定在网页顶部。

于 2018-05-23T04:38:51.513 回答
0

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

  • 在 body 元素中都有 header 和 small-header
  • 让 body 创建一个新的堆叠索引，例如 z-index: 0
  • small-header 获取位置：固定和 z-index：1
  • 标题获取位置：相对和 z-index：2

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

较小的标题在内容的后面但仍位于内容的前面（z 方向）。

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

于 2017-03-17T11:17:04.357 回答