Hover header+Sub-header that adapts when scrolling

Question

I'm new and learning to code a website!

I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)

This is what I'm working on http://goo.gl/KqAM2R

Thanks in advance!

http://i.imgur.com/flT3oJ1.jpg

It's not possible only with html and CSS.... Why u try using JavaScript and jquery... — vijay kani, Jul 04 '15 at 14:14

score 1 · Answer 1 · edited May 23 '17 at 12:06

You need to use JavaScript to achieve this effect. SSCCE: NewFile.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>

NewFile.js:

function isElementInViewport (el, topOrBottom) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();
    if(topOrBottom == "top"){
        return rect.top >= 0;
    }else{
        return rect.bottom <=  $(window).height();
    }
}


function onVisibilityChange () {
    var headers = document.getElementsByClassName("doge");
    var headerAbove = null;
    for(i = 0; i<headers.length; i++){
        $( headers[i]).css("position","");
        $( headers[i]).css("top","");
        if(!isElementInViewport(headers[i], "top")){
            headerAbove = headers[i];
        }

    }
    if(headerAbove != null){
        $( headerAbove).css("position","fixed");
        $( headerAbove).css("top","30px");
    }
}

$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);

And NewFile.css

@CHARSET "UTF-8";

.fixed-top{
    width:100%;
    position:fixed;
    top:0px;
    background-color: red;
}

.whatever1{
    width:100%;
    background-color: green;
}

.whatever2{
    width:100%;
    background-color: blue;
}

.much-text{
    height: 2000px;
}
.doge {

}

Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange

It's possible in this case too right? http://goo.gl/KqAM2R Is there also, a neat/cleaner javascript? :/ — iStack, Jul 04 '15 at 18:34

Malik Naik · Accepted Answer · 2015-07-04T19:46:57.183

Try this...

HTML

    <div id="page" class="page">

         <div class="container">

                <div class="contentheadercontainer">

                    <div class="fsh"><div class="firstheader">Sub header 1</div></div>
                    <div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>

                        </div>

                </div>

         </div>
</div>

CSS

body{
    padding: 0px; margin: 0px;
}
.container{
   height: 1000px;
}
.fsh{
   position: absolute; width: 100%;
}
.firstheader{
   height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
   border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}

Javascript

document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
    var html = document.documentElement;
    var top = (window.pageYOffset || html.scrollTop)  - (html.clientTop || 0);
    if(top > 235){
      document.getElementById('secondheader').style.position = 'fixed';
 document.getElementById('secondheader').style.marginTop = '60px';
 document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
 document.getElementById('secondheader').style.marginTop = '300px';
}
}

Check out this JSFiddle

Thanks a lot! P.S is there a way to remove the snapping effect when they are joining? — iStack, Jul 04 '15 at 19:40

Hover header+Sub-header that adapts when scrolling

2 Answers2