эффект прокрутки на заголовке - PullRequest
Новая
       46

эффект прокрутки на заголовке

0 голосов
/ 02 мая 2020

Я хочу добавить теневую линию под заголовком / навигацией по всей странице, когда пользователь прокручивает страницу вниз. Я использую js, чтобы добавить заголовок класса к идентификатору элемента 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>

Что за хитрость?

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

ваш js код не работал, потому что элемент с идентификатором headerUtopia не существовал. Я удалил класс sticky из элемента section и добавил в тег header. Я также добавил z-index в класс sticky, чтобы другие элементы были ниже.

Я верю, что именно этого вы и пытаетесь достичь. 

/* 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>
0 голосов
/ 03 мая 2020 

/* 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>
...