eve*_*veo 0 html javascript css jquery
我一直在阅读粘性标题,这是我到目前为止所发现的.第一个粘性标题工作得很好但我怎么能滚动第一个标题并在遇到它时将第一个标题推出视图后使第二个标题卡住了？
<style>
body {
margin: 0;
text-align: center;
font-family: sans-serif;
}
.fixed {
position: fixed;
top: 0;
}
.sticky {
width: 100%;
background: #F6D565;
padding: 25px 0;
text-transform: uppercase;
}
</style>
<p style="margin-bottom:100px;">Scroll this page.</p>
<div class="sticky"><h3>Super amazing header</h3></div>
<p style="margin-top:500px;">Still there?</p>
<p style="margin-top:500px;">Yep!</p>
<p style="margin-top:500px;">Scroll so hard!</p>
<div class="sticky"><h3>Super amazing 123</h3></div>
<p style="margin-top:500px;">Still there?</p>
<p style="margin-top:500px;">Yep!</p>
<p style="margin-top:500px;">Scroll so hard!</p>
<script>
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
}
document.addEventListener('scroll', onScroll);
</script>
我相信以下内容将完全符合您的要求......
该#firstHeader滚过时将结合到顶部,然后在#secondHeader用的底部碰撞#firstHheader,他们将加入和#firstHeader将关闭屏幕的推动,直至#secondHeader到达屏幕的顶部,并结合有...
希望这是有道理的,如果没有,如果你看到它在行动中可能会更容易:http://jsfiddle.net/yZKea/
该解决方案确实使用jquery.因此,您需要head在其余JS代码之前在其中包含对它的引用:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
注:本JS并不像艰巨的或长的,因为它看起来,大部分是重复的样式设置.您可以轻松将其更改为几行:)
html, body {
margin: 0;
padding: 0;
border: 0;
}
.spacer{
height:200px;
background:#f00;
opacity:.5;
border-top:#d22 5px solid;
width: 100%;
}
#firstHeader{
background:#00f;
height: 100px;
width: 100%;
z-index:500;
}
#secondHeader{
background:#0f0;
height: 100px;
width: 100%;
z-index:500;
}
<body>
<div class="spacer"></div>
<div id="firstHeader">Header 1</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div id="secondHeader">Header 2</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
</body>
function scrollFunction(){
var sticky1 = $('#firstHeader');
var sticky2 = $('#secondHeader');
sticky1.css({
position: "static",
top: 0
});
sticky2.css({
position: "static",
top: 0
});
$('body').css({
"padding-top": 0
});
var topOffset1 = sticky1.offset().top;
var topOffset2 = sticky2.offset().top;
var stickyHeight1 = sticky1.outerHeight();
var stickyHeight2 = sticky2.outerHeight();
var scrollHeight = $(window).scrollTop();
if(topOffset1 <= scrollHeight && scrollHeight < topOffset2 - stickyHeight1){
sticky1.css({
position: "fixed",
top: 0
});
sticky2.css({
position: "static",
top: 0
});
$('body').css({
"padding-top": stickyHeight1
});
}
else if(scrollHeight >= topOffset2 - stickyHeight1 && scrollHeight < topOffset2){
sticky1.css({
position: "fixed",
top: - (scrollHeight - (topOffset2 - stickyHeight1))
});
sticky2.css({
position: "fixed",
top: stickyHeight1 - (scrollHeight - (topOffset2 - stickyHeight1))
});
$('body').css({
"padding-top": stickyHeight1 + stickyHeight2
});
}
else if(scrollHeight >= topOffset2){
sticky1.css({
position: "static"
});
sticky2.css({
position: "fixed",
top: 0
});
$('body').css({
"padding-top": stickyHeight2
});
}
else{
sticky1.css({
position: "static",
top: 0
});
sticky2.css({
position: "static",
top: 0
});
$('body').css({
"padding-top": 0
});
}
}
$(window).scroll(scrollFunction);
这应该解决了具有闪烁屏幕的问题.
var topOffset1, topOffset2;
function scrollFunction(){
var sticky1 = $('#firstHeader');
var sticky2 = $('#secondHeader');
var stickyHeight1 = sticky1.outerHeight();
var stickyHeight2 = sticky2.outerHeight();
var scrollHeight = $(window).scrollTop();
if(topOffset1 <= scrollHeight && scrollHeight < topOffset2 - stickyHeight1){
sticky1.css({
position: "fixed",
top: 0
});
sticky2.css({
position: "static",
top: 0
});
$('body').css({
"padding-top": stickyHeight1
});
}
else if(scrollHeight >= topOffset2 - stickyHeight1 && scrollHeight < topOffset2){
sticky1.css({
position: "fixed",
top: - (scrollHeight - (topOffset2 - stickyHeight1))
});
sticky2.css({
position: "fixed",
top: stickyHeight1 - (scrollHeight - (topOffset2 - stickyHeight1))
});
$('body').css({
"padding-top": stickyHeight1 + stickyHeight2
});
}
else if(scrollHeight >= topOffset2){
sticky1.css({
position: "static"
});
sticky2.css({
position: "fixed",
top: 0
});
$('body').css({
"padding-top": stickyHeight2
});
}
else{
sticky1.css({
position: "static",
top: 0
});
sticky2.css({
position: "static",
top: 0
});
$('body').css({
"padding-top": 0
});
}
}
$(function(){
topOffset1 = $('#firstHeader').offset().top;
topOffset2 = $('#secondHeader').offset().top;
});
$(window).scroll(scrollFunction);
只需将类添加.header到标题中,这将适用于任意数量的标题(1,5,100 ......您明白了这一点).
这是上述JS的完全替代品,每个新标题会在绑定到顶部之前将旧标题推出屏幕.
请参阅此更新jsfiddle以获取其中的示例:http://jsfiddle.net/5bkst/
var topOffset = new Array();
function scrollFunction(){
var scrollHeight = $(window).scrollTop();
var headerCounter = 0;
var scrolled = 0;
var headerItems = $('.header').length;
$('.header').each(function(index, el){
var elementHeight = $(this).outerHeight();
var nextElementHeight = 0;
var nextElement;
if(index !== $('.header').length - 1){
nextElementHeight = $('.header').eq(index + 1).outerHeight();
nextElement = $('.header').eq(index + 1);
}
if(scrollHeight >= topOffset[headerCounter]
&& (scrollHeight < topOffset[headerCounter + 1] || headerCounter == headerItems-1)){
scrolled = 1;
if(scrollHeight >= topOffset[headerCounter + 1] - elementHeight){
$(this).css({
position: "fixed",
top: - (scrollHeight - (topOffset[headerCounter + 1] - elementHeight))
});
nextElement.css({
position: "fixed",
top: topOffset[headerCounter + 1] - scrollHeight
});
$('body').css({
"padding-top": elementHeight + nextElementHeight
});
return false;
}
else{
$(this).css({
position: "fixed",
top: 0
});
nextElement.css({
position: "static",
});
$('body').css({
"padding-top": elementHeight
});
}
}
else{
$(this).css({
position: "static"
});
}
headerCounter++;
});
if(scrolled == 0){
$('body').css({
"padding-top": 0
});
}
}
$(function(){
$('.header').each(function(){
topOffset.push($(this).offset().top);
});
});
$(window).scroll(scrollFunction);