关于标题的滚动效果答案

【问题标题】：on scroll effect on header关于标题的滚动效果
【发布时间】：2020-05-02 20:22:37
【问题描述】：

当用户向下滚动时，我想在整个页面的标题/导航下方添加一条阴影线。我使用js将类标题添加到元素id myheader中。当元素标头包含 id=... 时，尽管我看到在检查器中添加了类，但它不起作用。

<header class="container" id="myheader">
<section class="site-header sticky">
<nav class="navbar navbar-expand-md navbar-light">

当我将 id=... 移动到 section 元素中时，它可以工作，但阴影线仅从导航栏下方开始，我希望它横跨整个屏幕。

<header class="container">
<section class="site-header sticky" id="myheader">
<nav class="navbar navbar-expand-md navbar-light">

我尝试添加几行，但它也不起作用。

<header class="container-fluid">
<div class="site-header" id="myheader">
<section class="container site-header sticky" >
<nav class="navbar navbar-expand-md navbar-light">
...

.site-header {
  z-index: 100;
}


/* sticky header */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


/* shadow box */

.headline {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<script>
  window.onscroll = function() {
    headline()
  };

  var block = document.getElementById("headerUtopia");

  function headline() {
    if (window.pageYOffset > 10) {
      block.classList.add("headline");
    } else {
      block.classList.remove("headline");
    }
  }
</script>
<header class="container-fluid">
<section class="site-header sticky" id="myheader">
<nav class="navbar navbar-expand-md navbar-light">
</nav>
</section>
</header>

有什么诀窍？

【问题讨论】：

请添加你的css和js。一个演示问题的最小示例将帮助我们解决它！
谢谢@Rachel Gallel。我已按要求添加了 js & css 代码。引导容器和容器流体类未修改。
您将不得不提供更多内容来处理。没有什么可滚动的！ iis headerUtopia 在哪里（它的 css 是什么？）请编辑 sn-p

标签： javascript containers onscroll

【解决方案1】：

/* site sections */
.site-header { 
  z-index:100;
  background-color:white; 
} 
.site-footer { 
  z-index:10; 
  padding-top:16px;
}
.site-page { 
  z-index:10; 
  padding-top:156px; 
  padding-bottom:156px; 
}


/* sticky header */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


/* shadow box */
.headline {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <script>
      window.onscroll = function() {
        headline()
      };

      var block = document.getElementById("headerUtopia");

      function headline() {
        if (window.pageYOffset > 10) {
          block.classList.add("headline");
        } else {
          block.classList.remove("headline");
        }
      }
    </script>
  </head>
  <body>
    <header class="container-fluid" id="myheader">
      <section class="site-header sticky" id="myheader">
        <nav class="navbar navbar-expand-md navbar-light">
          <a class="navbar-brand" href="#"><img src="http://www.gondwanastudio/xMedia/Logo/Logo_UC.png" alt="logo" style="max-width: 180px;"></a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">

                <div class="navbar-nav mr-auto">
            <a href="#" class="nav-link">about</a>
            <a href="#" class="nav-link">services</a>
            <a href="#" class="nav-link">projects</a>
            <a href="#" class="nav-link">blog</a>
            <a href="#" class="nav-link">contact</a>
              </div>

            </div>
        </nav>
      </section>
    </header>      

    <section class="site-page">
      <div class="container content">

        <div class="row">
          <div class="col-12">
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
            some text...<br />
          </div>
         </div>

       </div>
     </section>
</body>
</html>

.site-header {
  z-index: 100;
}


/* sticky header */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


/* shadow box */

.headline {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<script>
  window.onscroll = function() {
    headline()
  };

  var block = document.getElementById("headerUtopia");

  function headline() {
    if (window.pageYOffset > 10) {
      block.classList.add("headline");
    } else {
      block.classList.remove("headline");
    }
  }
</script>
<header class="container-fluid">
<section class="site-header sticky" id="myheader">
<nav class="navbar navbar-expand-md navbar-light">
</nav>
</section>
</header>

【讨论】：

嘿，保罗，你的代码抛出了地狱般的错误，因为你在滚动功能上调用了一些不起作用的东西，
很抱歉，初始页面没有错误，但也许当我简化页面以放入 sn-p 时。

【解决方案2】：

您的 js 代码无法正常工作，因为 ID 为 headerUtopia 的元素不存在。我已经从 section 元素中删除了 sticky 类并添加到 header 标记中。我还在sticky 类中添加了z-index，因此其他元素将位于其下方。

我相信这正是您想要实现的目标。

/* site sections */
#myheader {
  z-index:100;
  background-color:white;
}
.site-footer {
  z-index:10;
  padding-top:16px;
}
.site-page {
  padding-top:156px;
  padding-bottom:156px;
}


/* sticky header */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9;
}


/* shadow box */
.headline {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="dist/app.css" />
</head>
<body>
<header class="container-fluid sticky" id="myheader">
  <div class="container">
    
        <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="#"><img src="http://www.gondwanastudio/xMedia/Logo/Logo_UC.png" alt="logo" style="max-width: 180px;"></a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">

                <div class="navbar-nav mr-auto">
                    <a href="#" class="nav-link">about</a>
                    <a href="#" class="nav-link">services</a>
                    <a href="#" class="nav-link">projects</a>
                    <a href="#" class="nav-link">blog</a>
                    <a href="#" class="nav-link">contact</a>
                </div>

            </div>
        </nav>
    
   <div>
</header>

<section class="site-page">
    <div class="container content">

        <div class="row">
            <div class="col-12">
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />   some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />   some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />   some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
                some text...<br />
            </div>
        </div>

    </div>
</section>
<script>
    window.onscroll = function() {
        headline()
    };

    var block = document.getElementById("myheader");

    function headline() {
        if (window.pageYOffset > 10) {
            block.classList.add("headline");
        } else {
            block.classList.remove("headline");
        }
    }
</script>
</body>

【讨论】：

谢谢@Sandesh Sapkota。是和不是。我想我能够在我的测试中实现类似的东西，但是一旦我将标题（我的意思是导航栏）放在页面中心的容器中，那么下面的行只会在导航栏下方开始。您建议在什么/哪里添加一个容器类来实现这一点？
你应该在header标签内添加container。我已经更新了我的答案。请看一下。
我还删除了 section 标签，因为那里没有必要，并将其 CSS 应用于 #myheader
这是 100% 的工作......非常感谢@Sandesh Sapkota
很高兴为您提供帮助:)