Header ist transparent an der Spitze

Ich habe eine Menge Probleme, meine Kopfzeile davon abzuhalten transparent zu werden, während ich die Seite herunterscrolle. Ich bin nicht sicher, was es verursacht (ich eine Vorlage verwendet wird), aber Sie können den Code sehen hier:Header ist transparent an der Spitze

https://github.com/IF-Apps/IF-Charts

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang=""> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>IF-Charts - Charts and Plates for Flight Simulation</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" /> 
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" /> 
    <link rel="stylesheet" href="css/normalize.min.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/jquery.fancybox.css"> 
    <link rel="stylesheet" href="css/flexslider.css"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <link rel="stylesheet" href="css/queries.css"> 
    <link rel="stylesheet" href="css/etline-font.css"> 
    <link rel="stylesheet" href="bower_components/animate.css/animate.min.css"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> 
    <div id="fb-root"></div> 
    <script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 
</head> 
<body id="top"> 
    <!--[if lt IE 8]> 
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
    <section class="hero"> 
     <section class="navigation"> 
      <header> 
       <div class="header-content"> 

        <div class="header-nav"> 
         <nav> 
          <ul class="primary-nav"> 
          <li><a href="index.html">Home</a></li> 
           <li><a href="ifcharts.html">IF-Charts</a></li> 
           <li><a href="learnmore.html">Learn More</a></li> 
           <li><a href="contact.html">Contact</a></li> 
          </ul> 
         </nav> 
        </div> 
        <div class="navicon"> 
         <a class="nav-toggle" href="#"><span></span></a> 
        </div> 
       </div> 
      </header> 
     </section> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-10 col-md-offset-1"> 
        <div class="hero-content text-center"> 
         <h1>IF-Charts</h1> 
         <p class="intro">Plan your flight with plates.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
      <section class="features section-padding" id="features"> 
     <div class="container"> 
      <div class="row"> 
        <div class="feature-list"> 
         <h3>Plan your flight</h3> 
         <p>Select the airport you would like charts for. Want to learn how to use charts? Check out the <a href="tutorial.html">tutorial</a>. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p> 
         <br> 
         <div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br> 
         <br> 

    <div align="center"> 
     <h2>Please choose:</h2> 
     <br /> 

      <span> 

      <a href="charts_depart.html"><img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;"></a> 

      <a href="charts_arrive.html"><img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;"></a> 

      </span> 
     <p>View all charts <a href="ifcharts-old.html">here</a>. 
    </div> 
      </section> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-7"> 
        <div class="footer-links"> 
         <a href="https://github.com/GiacomoLaw/IF-Charts/blob/master/LICENSE">Licence</a> | <p><p>By Giacomo Lawrance.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </footer> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 
    <script src="bower_components/retina.js/dist/retina.js"></script> 
    <script src="js/jquery.fancybox.pack.js"></script> 
    <script src="js/vendor/bootstrap.min.js"></script> 
    <script src="js/scripts.js"></script> 
    <script src="js/jquery.flexslider-min.js"></script> 
    <script src="bower_components/classie/classie.js"></script> 
    <script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script> 
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
    <script> 
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
    e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
    e.src='//www.google-analytics.com/analytics.js'; 
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
    ga('create','UA-XXXXX-X','auto');ga('send','pageview'); 
    </script> 
</body> 
</html>

Ich denke, es mit der CSS zu tun hat, aber ich bin nicht sicher.

Das Problem ist, dass oben im Menü die Menüpunkte nicht zu sehen sind. Ich möchte nur, dass der Header schwarz bleibt. Sie können das Problem hier sehen:

https://if-charts.000webhostapp.com/

Quelle

2016-11-21 Giacomo Lawrance

Wir müssen den Code hier sehen ... den entsprechenden Code – DaniP

In Ihrer scripts.js-Datei gibt es eine Funktion, die beim Scrollen mehrere Dinge hinzufügt oder entfernt.

/***************** Header BG Scroll ******************/ 

    $(function() { 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 20) { 
       $('section.navigation').addClass('fixed'); 
       $('header').css({ 
        "border-bottom": "none", 
        "padding": "35px 0" 
       }); 
       $('header .member-actions').css({ 
        "top": "26px", 
       }); 
       $('header .navicon').css({ 
        "top": "34px", 
       }); 
      } else { 
       $('section.navigation').removeClass('fixed'); 
       $('header').css({ 
        "border-bottom": "solid 1px rgba(255, 255, 255, 0.2)", 
        "padding": "50px 0" 
       }); 
       $('header .member-actions').css({ 
        "top": "41px", 
       }); 
       $('header .navicon').css({ 
        "top": "48px", 
       }); 
      } 
     }); 
    });

diese Funktion vollständig entfernen.

ändern

<section class="navigation">

<section class="navigation fixed">

Wenn Sie die anderen Eigenschaften als auch fügen Sie den folgenden Klassen in der CSS-Datei verwenden möchten.

Quelle

2016-11-21 19:16:07 Ricky

Ehrfürchtig, vielen Dank! –

Sie benötigen eine Hintergrundfarbe der Navigation hinzuzufügen.

.navigation { 
    background: #232731; 
}

Quelle

2016-11-21 19:15:41 greatwanderer

Header ist transparent an der Spitze

Antwort

Verwandte Themen