Question

我是新手并且正在学习编写网站代码！

我正在尝试执行此悬停标题，当用户向下滚动时，它将保留在屏幕上，当用户到达子标题1时，它也会将其悬停并在用户到达子标题2时更改（子标题1将消失）

这就是我正在研究的man page

提前致谢！

Answer 1

您需要使用JavaScript来实现此效果。 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);

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

}

感谢How to tell if a DOM element is visible in the current viewport?的答案作者的灵感。另外，我知道这段代码并不符合js＆amp; amp;但是OP显然可以从这个中找到想法。请注意，在function onVisibilityChange

中对标题进行迭代之前，您可能需要以自己的方式对标题进行排序（从顶部标题到底部标题）

Answer 2

试试这个......

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

查看此JSFiddle

悬停标题+滚动时适应的子标题

2 个答案: