Auf Thema antworten

Beitrag

[QUOTE="basti1012, post: 11853, member: 1688"]
Wenn du das Beispiel aus codepen benutzen willst muss deine Seite so aussehen
[CODE=html]<!doctype html>
<html>
  <head>
    <style>
      #box{
  width:100%;
  height:100vh;
  background-image: url(https://images.unsplash.com/photo-1484387436194-cf7cb70800ce?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=073c77fe92e53e22ed4a58231a5e0d47);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:  center;
}
/*  this is the outer div which hold the navbar its transparent color because of fixed-top class. padding here defines the height of the navbar this value must be lower than the padding in sticky-menu padding to give that sizing effect  */
.custom-nav{
  padding:20px 0;
      transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}
.sticky-menu {
    background: #fff;
    box-shadow: 0 1px 20px -3px rgba(0,0,0,.2);
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
/*   padding must be higher here */
    padding: 10px 0;
}

/*  when white sticky menu show- link will be of black color*/
.sticky-menu .navbar-dark .navbar-nav .nav-link {
    color: #000;
}
/*  when white sticky menu show- navbar-brand will of black color*/
.sticky-menu .navbar-dark .navbar-brand  {
    color: #000;
}

/*  */
.sticky-menu .navbar-dark .navbar-nav .active > .nav-link,
.sticky-menu .navbar-dark .navbar-nav .nav-link.active
{
   color:orange;
}

.navbar-brand{
  margin-left: 1rem;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 0.9rem;
  color:#fff;
    padding: 0 15px;
    text-transform: uppercase;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active{
  color:orange;
}
</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<header>
  <div class="custom-nav fixed-top">
  <div class="container">
    <div class="row">
      <div class="col">
        <nav class="navbar navbar-expand-md navbar-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
            
    </button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Bio</a>
              </li>

<li class="nav-item">
                <a class="nav-link" href="#">About US</a>
              </li>

<li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
              </li>

<li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
              </li>
            </ul>

</div>
        </nav>

</div>
    </div>
  </div>
</div>
</header>
<div id="box"></div>
  <h1>hello</h1>
  <h1>hello</h1>
<script>
  $( document ).ready(function() {
$(window).on('scroll', function() {
    var el = $('.custom-nav');
    if ($(window).scrollTop() > 50) {
        el.addClass('sticky-menu');
    } else {
        el.removeClass('sticky-menu');
    }
});
  });
</script>
</body>
</html>[/CODE]
[/QUOTE]

Authentifizierung