滚动时调整标题大小
我希望在用户滚动时调整标题大小，并在页面位于顶部时再次resize。 我有这个例子HTML
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.
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.
这个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/
该section没有定义的位置，因此它落后于.header所以：
section { position:relative; }
（ 我想 ）
演示： http ： //jsfiddle.net/pavloschris/rHmCu/3/
你的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'); } } });
我没有测试过这段代码，但它就是这样的，当然你也可以根据需要动态获得高度。
我还添加了类测试的检查，因为如果类已经存在，则不需要做额外的工作。 只是一个注释，因为你在滚动上这样做，这可能导致平板电脑/手机上的口吃
如果你把它放在一个小提琴或至少说明最终目标，这将有所帮助。 我的回答是假设你想要一个可停靠的标题，并避免在标题停靠时跳转
header是一个元素，但是你的CSS和你的jQuery选择器都试图将它作为一个类来访问。 删除选择器中的点。
我写了一个插件和元素的插件，当它达到阈值时允许回调… 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并且应该这样做。
同样来自您的小提琴 – 将您的标题设置为绝对位置，然后当更改发生时您的内容不会跳转。 因为您已经定位它以考虑标题的大小和位置。
我设法在这里解决了一些答案，这导致了这个小提琴 –
$(window).scroll(function(){ if ($(this).scrollTop() > 0){ $('header').addClass("test"); $('section').css("padding-top", "220px"); } else{ $('header').removeClass("test"); $('section').css("padding-top", "0px"); } });
非常感谢所有花时间回答并让我的大脑继续努力的人
一个非常简单的解决方案，只有html和css：
- 在body元素中都有header和small-header
- 让body创建一个新的堆栈索引，例如z-index：0
- small-header获取position：fixed和z-index：1
- header获取位置：relative和z-index：2
这会将（大）标题放在前面，它仍会滚动并离开视口。
较小的标题位于后面但仍位于内容的前面（z-wise）。
标题和内容一起滚动，同时固定的小标题保持在原位。 它可以这么简单。
你可以尝试这个简单的东西来调整滚动窗口上的标题。
$(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; }
LOGO
Scroll down to see the magic in action...
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.
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.
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.
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.
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.
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.
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.
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.
将.test {改为.header.test {