JS对于可变数量的标题

Question

我一直在阅读粘性标题，这是我到目前为止所发现的。第一个粘性标题工作得很好，但是当我遇到第一个标题时，如果它将第一个标题推出视图时，我怎么能滚动第一个标题并使第二个标题卡住呢？

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

Answer 1

我相信以下内容会根据您的需要完全 ...

#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不是令人生畏的或 long ，因为它看起来很多都是重复设置的风格。您可以轻松地将其更改为几行：）

CSS

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;
}

HTML

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

JS

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);

更新了JS

这可以解决使用闪烁屏幕的问题。

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);

JS对于可变数量的标题

只需将类.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);

Answer 2

如果你想切换标题而不是试试这个。 FIDDLE

<header class="default">
  <div class="default-cnt">
    Default Content
  </div>
  <div class="fixed-cnt">
    Fixed Content
  </div>
</header>

header {
  width: 100%;
  height: 120px;
  padding: 10px;
  letter-spacing: 1px;
}
.default {
  background: #555;
  position: relative;
  color: #fff;
}
.fixed {
  background: #01a8e7;
  position: fixed;
  top: 0;
  left: 0;
  color: #000;
}
.default .fixed-cnt {
  display: none;
}
.fixed .default-cnt {
display: none;
}

$(function() {
  var header = $('header');
  var headOff = header.offset();

  $(window).scroll(function() {
    if($(this).scrollTop() > 120 + headOff.top && header.hasClass('default')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('default').addClass('fixed').fadeIn('fast');
      });
    } 
    else if($(this).scrollTop() <= 120 + header.height() && header.hasClass('fixed')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('fixed').addClass('default').fadeIn('fast');
      });
    }
  });
});

当到达当前卡住的标头时，用第二个标头替换粘性标头

2 个答案:

CSS

HTML

JS

更新了JS

JS对于可变数量的标题